`vertical-align：middle`不能做我期望的

如果我在一個表格單元格中，將CSS規則vertical-align: middle;應用到那個單元格，那麼所有的文本在單元格中垂直居中。`vertical-align：middle`不能做我期望的

<table> 
    <tr> 
     <td style="vertical-align: middle;"> 
      I am vertically centered text! 
     </td> 
    </tr> 
</table>

但是，如果我將此應用於另一個元素，它的功能不同或根本不起作用。例如：

<div style="width: 300px; height: 400px; vertical-align: middle;"> 
    I am not vertically centered, but I wish I was :(
</div>

不過，如果我把它應用到圖像標記然後調整圖像的方向如何與其他內聯元素。

Here is a jsfiddle with examples of all these scenarios.

我的問題是，我怎麼能完成一個簡單的DIV中垂直居中對齊，就像它在一個表格單元格的行爲方式？

來源

2012-05-08 Chev

'display：table-cell'（半開玩笑） – zwol

@Zack這是有效的，但如果'DIV'是'position：absolute'則不會。任何想法爲什麼？ – Chev

例如，請參閱http://jsfiddle.net/Chevex/7FYBa/2/。 – Chev

將display: table-cell添加到您的div。

的jsfiddle：http://jsfiddle.net/7FYBa/20/

<div class="outer" style="position:absolute;"> 
    <div class="inner" style="display:table-cell; vertical-align:middle;"> 
     I am not vertically centered, but I wish I was :(
    </div> 
</div>

來源

2012-05-08 20:29:38

謝謝喬納森。這在大多數情況下很有用，但在我的用法中，我需要使用'position：absolute'來設置div，然後停止對中。 http://jsfiddle.net/Chevex/7FYBa/2/有什麼想法？ – Chev

如果你完全定位你的DIV，那麼你（虛擬）將永遠無法將它垂直居中放置在周圍的元素中。 –

@AlexFord你可以將它包裝在一個父div中，而絕對位置代替它。我更新了我的答案和小提琴。 –

當然不過。垂直居中在CSS中非常時髦。

我建議你閱讀一些垂直居中技術。不同的元素和考慮等同於不同的方法。 Here's an article I'd suggest。

來源

2012-05-08 20:36:14

您可以使用jQuery http://jsfiddle.net/7FYBa/30/

來源

2012-05-08 20:41:30

vertical-align作品沒有表元素，當你增加line-height嘗試這樣的事情。

#elem { 
    vertical-align: middle; 
    line-height: 100px; 
}

但當然佈局並不容易使用line-height。

來源

2012-05-08 20:45:07

`vertical-align：middle`不能做我期望的

回答

相關問題