为什么这不垂直居中?

时间:2013-04-16 15:06:26

标签: image html containers css

html代码:

<div class="container">
  <a class="ank">
    <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
  </a>
</div>

css代码:

.ank
{
  display: block;
  width: 500px;
  height: 500px;
  line-height: 100%;
 }

 img
 {
  vertical-align: middle;
 }

 .container
 {
  display:block;
  width: 500px;
  height: 500px;
  border: 1px solid black;
  font-size: 500px;
 }

jsfiddle:http://jsfiddle.net/mfBZZ/5/

如果我更改jsfiddle,使得anks line-height为500px,并从容器中删除font-size,它就可以工作。

但是当我将font-size添加到500px的容器中,然后以ank(100%的字体大小)形成行高时,它不起作用。它使图像低于它应该的位置。

工作jsfiddle:http://jsfiddle.net/eujFY/1/

更新:

此解决方案适合我: http://jsfiddle.net/eujFY/2/&lt; ----更新。

1 个答案:

答案 0 :(得分:0)

我见过你找到了一个解决方案,但它意味着在两个元素上手动设置高度,它需要使用不必要的标签。 所以我建议你检查“display:table”(容器)和“display:table-cell”(内部元素)规则:http://jsfiddle.net/RxGS5/

HTML

<div class="container">
    <a class="ank">
        <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
    </a>
</div>

CSS

.container
{
    display:table;
    width: 500px;
    height: 500px;
    border: 1px solid black;
}

.ank
{
    display: table-cell;
    vertical-align: middle;
}