Question

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

此代码无效...如何垂直对齐图像？

Answer 1

垂直对齐中间作品，但您必须在父元素上使用表格单元格，并在子项目上使用内联块。

这个解决方案在IE6＆amp; 7。你的是更安全的方式。但是，既然你用CSS3和HTML5标记了你的问题，我以为你不在乎。

这是一个例子

测试：

FF3.5 FF4 Safari 5 Chrome 11＆amp; 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;
}

垂直对齐不起作用（HTML5）

1 个答案: