1 
<body>
   <div style="width:800px; height:500px; margin:0 auto; background-color: blue" >
      <div style="vertical-align:middle;"><img src="sl1.jpg" width="50%"></div>
   </div>
</body>

This code is not working... how do I align the image vertically?

4

1 回答 1

1

垂直对齐中间有效，但您必须在父元素上使用 table-cell 并在子元素上使用 inline-block。

此解决方案不适用于 IE6 和 7。您的解决方案是更安全的方法。但既然你用 CSS3 和 HTML5 标记了你的问题，我以为你不在乎。

这是一个例子

测试：

FF3.5 FF4 Safari 5 Chrome 11 & 12 IE9 HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

div.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

div.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}
于 2015-05-14T11:09:16.863 回答