垂直對齊不起作用（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）

回答

相關問題