垂直对齐不起作用（HTML5）

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

此代码不工作...如何垂直对齐图像？垂直对齐不起作用（HTML5）

来源

2013-05-12 jovanMeshkov

可能重复[垂直居中一个div在另一个div]（http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div） – Gajus 2014-12-19 12:42:31

垂直对齐中间的作品，但您必须在您的父元素和子内嵌块上使用表格单元格。

此解决方案不会在IE6中工作& 7. 您是更安全的方式。但是，既然你用CSS3和HTML5标记了你的问题，我以为你不在乎。

以下是在测试的示例

：

FF3.5 FF4 Safari 5的铬11 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-14 11:09:16 Daniele

垂直对齐不起作用（HTML5）

回答

相关问题