是否可以在div中垂直自动居中元素?

时间:2012-06-14 18:59:05

标签: css margin

我有一个在线照片库。缩略图页面是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之前没有办法做到这一点,那么我将不得不提出一个解决方法,但如果我遗失了什么,请告诉我。

提前感谢大家的帮助!

1 个答案:

答案 0 :(得分:2)

您有一个内联元素(<img>),它位于一个大小的父<div>元素中:

<div>
    <img />
</div>

您需要做的就是使其居中和中间对齐。您将其text-align:center;置于父<div>中,然后通过给出<div> line-height的全高来对齐它。另外,因为它是<img>标记,您可以为该图像标记提供在其中完成的vertical-align:middle;标记,无论其自身大小如何:

enter image description here

实施例/ Demo

<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>