div内部图像的垂直对齐

Question

我想在div中设置图像的垂直对齐方式.我使用img {vertical-align:middle}但它不起作用.

Answer 1

使用该line-height属性将解决问题:

<style> 
.someclass {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  border: dotted;
}
.someclass img {
  margin: auto;
  vertical-align: middle;
}
</style>
<div class="someclass"> 
  <img src="someimg.jpg" border="0" alt=""> 
</div>

Answer 2

这是一个不需要JavaScript的解决方案(正如我之前的解决方案所做的那样).

您可以通过分配display: table-cell包含div 来实现您想要的效果.这是一个例子:http://jsbin.com/evuqo5/2/edit

我觉得我必须警告你,你需要在你想要支持的每个浏览器中测试它.对table-cell价值的支持相当新,特别是在Firefox中.我知道它适用于Firefox 4,但我不知道任何3.x迭代.你也想在IE中测试(我只在Chrome 10和Firefox 4中测试过).

CSS:

  div#container {
    width: 700px;
    height: 400px;
    position: relative;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;  
  }
  div#container img {
    margin: 0 auto;
    display: block;
  }

div#container img如果您不想水平对齐图像,则不需要样式.