垂直对齐

这是一个非常简单的问题，但几个小时后冲浪，我意识到，也许我没有收到这个概念的网站。垂直对齐

我：

<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

回答

相关问题