css - 是否可以在 div 中垂直自动居中元素？

Question

我有一个在线照片库。缩略图页面是一个 150px x 150px div 的网格，缩略图图像设置在其中。

由于缩略图是矩形的，理想的做法是让它们在 div 中自动居中。

在这里阅读，我已经弄清楚如何将它们水平居中。我也一直在读到，在 CSS3 起飞之前，垂直自动居中是不可能的。这是真的？

我已经让水平图像自动居中：

.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}

但是，垂直居中不适用于此：

.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}

如果在 CSS3 之前无法做到这一点，那么我将不得不想出一个解决方法，但如果我遗漏了什么，请告诉我。

提前感谢大家的帮助！

Answer 1

您有一个内联元素 (the <img>)，它位于大小合适的父<div>元素内：

<div>
    <img />
</div>

您需要做的就是使其居中对齐。您将其与text-align:center;父级居中，并通过给出其全高来<div>将其居中对齐。此外，由于它是一个标签，因此无论它自己的大小如何，您都可以为该图像标签提供在其中完成的内容：<div>line-height<img>vertical-align:middle;

示例/演示：

<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
  div img {vertical-align:middle;}​
</style>

<div>
  <img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
  <img src="http://i.imgur.com/Az6NUl.jpg">
</div>