將文本對齊div的中心

我有一個大約200px x 40px的div。有時這個塊將包含一行文本，其他時間將包含兩行。在它包含2行文本的情況下，我調整了行高，使其看起來在div內保持平衡。但是，如果只有一行文本，則文本會與div頂部對齊，並將底部留空。將文本對齊div的中心

相反，我希望單行文本在div內垂直居中顯示。設置這個最好的方法是什麼？我是否應該將文本放置在次要元素（如<p>）中，然後嘗試應用vertical-align: middle？似乎應該有一個更簡單，更簡化的方法來實現這一點。有任何想法嗎？

來源

2010-06-27 Thomas

我不知道它是否工作在任何瀏覽器（在火狐，Chrome，IE8的作品）（上不IE7-工作）

<div style="display: table-row; height: 180px; width: 500px;"> 
    <div style="display: table-cell; vertical-align: middle; width: 500px; text-align: center;">Text</div> 
</div>

我知道，在任何肯定工程唯一的解決辦法瀏覽器是創建一個表並在單元上應用垂直對齊。

來源

2010-06-27 10:45:38 BrunoLM

嗯，我覺得這會是這樣的醜陋之處。多謝你們。 – Thomas 2010-06-27 11:50:41

雖然這似乎是一個簡單的問題，但在CSS2 AFAK中沒有簡單的解決方案。 Theme Forrest對這個問題的不同方法有很好的概述。

來源

2010-06-27 10:58:56 cmaderthaner

所有Internet Explorer版本都不支持簡單的解決方案。 CSS2支持它就好了。 – reisio 2010-06-27 11:56:24

將文本對齊div的中心

回答

相關問題