CSS`vertical-align：middle`不起作用？

我會想到的是，以下HTML文檔導致紅色正方形黃色正方形內垂直居中：CSS`vertical-align：middle`不起作用？

<html> 
<body> 

<div style="width:200px;height:200px;background-color:yellow"> 

    <div style="width:100px;height:100px;background-color:red;vertical-align:middle"> 

    </div> 

</div> 

</body> 
</html>

但它導致了一個對準其父div的頂部。

fiddle

我在做什麼錯？爲什麼不是vertical-align:middle工作？

來源

2013-01-12 Andrew Tomazos

vertical-align屬性會影響由行內級元素生成的框的行框內的垂直定位。 Here are more details!

來源

2013-01-12 08:14:10 djthoms

打我的小提琴......反正只是檢查引用，如果您有任何問題。 W3C通常回答大多數CSS問題！ – djthoms

<div style="display: table-cell; width:200px;height:200px;background-color:yellow; vertical-align:middle"> 
    <div style="width:100px;height:100px;background-color:red;"> 
    </div> 
</div>

的jsfiddle here

來源

2013-01-12 08:15:15 peterm

CSS`vertical-align：middle`不起作用？

回答

相關問題