垂直對齊

這是一個非常簡單的問題，但幾個小時後衝浪，我意識到，也許我沒有收到這個概念的網站。垂直對齊

我：

<style> 
#more{width:190px; height:44px; border:1px solid #CCCCCC; padding-bottom:3px;vertical-align:middle;} 
</style> 

<div id='more'> My text </div>

這不居中「我的文字」垂直。我如何垂直居中文本？

萬分感謝

來源

2011-03-17 user523129

你可能有興趣在這篇文章中 - http://phrogz.net/css/vertical-align/index.html – kapa 2011-03-17 11:26:53

很少有，也非常不同的方式在CSS垂直居中的東西。使用的方法通常取決於具體情況。如：你是否期望你的文字包裝（由幾行組成）？ DIV本身如何定位？它有一個固定的大小？ – RoToRa 2011-03-17 11:31:56

我會用line-height等於你div的高度。

line-height: 44px;

注：這隻會在單行文本工作。

來源

2011-03-17 11:25:17

+1：注意這一點也適用單行，只對文本，（但這是OP的要求;） – 2011-03-17 11:28:29

這僅適用於，如果文本不換行（包括多線）。 – RoToRa 2011-03-17 11:34:24

不知道我們需要3條評論，說完全一樣的東西......我會添加到我的答案，我想。 – 2011-03-17 11:38:12

您需要使用display: table-cell;能夠垂直居中的文本。

Jsfiddle演示。

來源

2011-03-17 11:22:06 Haza

注：不會IE8 – kapa 2011-03-17 11:28:43

下工作，這會破壞佈局，pepending的DIV如何定位。 – RoToRa 2011-03-17 11:33:37

@bazmegakapa：IE8確實支持它。 IE7沒有。 – RoToRa 2011-03-17 11:35:36

回答

相關問題