小结line-height和vertical-align

小结line-height和vertical-align
作者：Neoxone 发表时间： 2010年01月5号，星期二阅读：22,495 次

line-height可以应用在所有元素上。
但尽管line-height可以加在block元素上，实际起作用的却是内部的inline元素或textnode节点(也体现了它的继承性质)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>line-height对非可置换inline元素的影响</title>
<style type="text/css">
.box{border:1px solid #000}
</style>
</head>
<body>
	<div class="box" style="line-height:100px">
		<span>line-height加在外层div上</span>
	</div>
	<div class="box" >
		<span style="line-height:100px">line-height加在内层span上</span>
	</div>
</body>
</html>

非可置换inline元素没有height;每一行的高度就由line-height决定。
而对于可置换inline元素，他本身其实是有内在高度的，将不受line-height影响（ie7是个例外）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可置换inline元素</title>
<style type="text/css">
.box{border:1px solid #000}
</style>
</head>
<body>
	<div class="box" style="line-height:100px">
		<input type="text"  />
	</div>
	<div class="box" style="line-height:100px">
		<input type="text" />若有textNode文本,又另当别论。
	</div>
</body>
</html>

但这点性质，似乎正在改变。
css2.1也如是说：对于block,inline-block(可置换inline元素就是天生的inline-block元素), line-height是做为其minimal height的。那当高度小于line-height时，是理应起作用的。
我们使用html5的doctype声明:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>可置换inline元素</title>
<style type="text/css">
.box{border:1px solid #000}
</style>
</head>
<body>
	<div class="box" style="line-height:100px">
		<input type="text" />
	</div>
</body>
</html>

在上面的例子里，除了ie6，这里的line-height在其他浏览器都能起作用。
总之，单纯设置外层height=line-height使image等可置换元素垂直居中，在ie6下是行不通的——如果要考虑ie6，请记住这一点。
那么，如何才能做到inline元素(包括可置换inline元素)的垂直居中，并且推而广之应用在block元素上呢？我们可以利用vertical-align属性。

现在先摘要说下vertical-align属性。
在CSS Specification中，line-height属性和vertical-align属性就是放在一起做介绍的。
Line height calculations: the ‘line-height’ and ‘vertical-align’ properties

vertical-align的默认值是baseline;
与line-height不同，vertical-align只能用在inline元素（还有’table-cell’ 元素）上
vertical-align属性在各个浏览器下都有不少的差异。参见：http://www.mikkolee.com/13

不过，我们要用到的属性middle在各个浏览器解释中却没有什么差异（或只有微小的差异）。
让同行的inline元素按中间线对齐，我们给各个inline元素加上vertical-align:middle;

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>横向同行垂直对齐</title>
<style type="text/css">
.box{height:100px;border:1px solid #ccc;}
.box input,.box span{vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
	vertical-align:middle<input type="text" style="padding:10px;" /><span>各元素横行对齐</span>
</div>
</body>
</html>

接着我们要相对外层做垂直居中。
假如，内部的一个inline元素（当然是可置换inline元素,或是设置了inline-block的元素——这二者其实是一样的）的高度也达到外层的高度，那么就可以保证内层所有的inline元素都垂直居中了。
所以我们可以设置这样一个空元素pillar。

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>横向对齐+垂直居中</title>
<style type="text/css">
.box{height:100px;border:1px solid #000;}
.box input,.box span{vertical-align:middle;}
.pillar{display:inline-block;width:0px;height:100%;vertical-align:middle;}  /* width:0的话，在opera下会失效。当然也有另外的方法来解决opera */
</style>
</head>
<body>
<div class="box">
	<span class="pillar" ></span>vertical-align:middle<input type="text" style="padding:10px;" /><span>各元素横行对齐</span>
</div>
</body>
</html>

是不是很熟悉啊，我们“未知尺寸元素的垂直居中”的一个方法就是从这里衍生而来的——那是针对block元素的居中：http://www.cssass.com/blog/index.php/2008/36.html
做法就是将block元素变成inline-block,或者干脆使用某一inline元素包住block元素（尽管这不符合标准），然后再使用上面的方法。

《未知尺寸元素（包括块元素）的垂直居中方法探究》

标签： line-height, Replaced inline, vertical-align, 兼容性, 垂直居中, 水平对齐

这篇文章发布于 2010年01月5号，星期二，14:01，归类于 CSS2。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

13 条评论发表在“小结line-height和vertical-align”上

dylan 说：

2010年01月7日于16:48

你好！！我想请教几个问题:能发到我邮箱上吗?谢谢
问题是:在html标签中那些是块元素，哪些是inline元素,和哪些是非可置换inline元素,和不可置换inline元素…我刚学CSS..

回复
oneboys 回复:
一月 8th, 2010 at 13:14
@dylan, HTML（小说明：我说的是html标准，而不是xhtml，他们在一些概念上还是有差别的。）里分两种基本元素，即block和inline。顾名思义，block元素就是以”块”表现的元素（block-like elements），inline元素即是以”行”表现的元素（character level elements and text strings）。二者表现的主要差别在于，在页面文档中block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

block元素大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)
注意的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。

inline元素大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

回复
周大智说：

2010年01月14日于16:36

“单纯设置外层height=line-height使image等非可置换元素垂直居中，在ie6下是行不通的。”，这句话应该是笔误了吧。image是replaced element。
还有“除了ie6，line-height在其他浏览器都能起作用。”这个说法不是太认同，ie6下面是有点BUG，所以有replaced element的行不能居中对齐，但是全是non-replaced element元素的行还是可以的。

水平有限，如有得罪，还请原谅。

回复
oneboys 回复:
一月 14th, 2010 at 19:34
@周大智, 嗯，的确笔误写错了，多谢提醒。你说的第二点，可能是我表述不好，我是意思是，“在上面的例子里，除了ie6，其他都显示出了line-height的作用”。编辑一下，再次感谢。

回复
oneboys 回复:
一月 14th, 2010 at 20:02
@周大智, 全是non-replaced element的行的确可以啊，这点我没有否认的。另外，我再测试了其他几个replaced element元素，label,button的确有特殊，应该是因为带了textNode节点的缘故，所以在ie6下也能显示出line-height的作用。看来，这个和我第二个例子（下半个）提到的那样，也另当别论了。

回复
周大智回复:
一月 14th, 2010 at 21:37
@oneboys, 关于non-replaced elements在一行下居中，我应该是理解错了你的意思。在IE6下，我只测试了img，input[type="text"]，input[type="checkbox"]。看来结论下的太早，感谢你的提醒。

回复
shadow 说：

2010年01月15日于14:08

对于.pillar在Opera的问题应该不是不能设置width:0;你将放在最后面试试。

回复
ONEBOYS 回复:
一月 30th, 2010 at 13:31
确实，thank you。那就省事多了

回复
gfgfgd 说：

2010年03月20日于16:15

回复
改变元素display属性的垂直居中方法。 | CSSASS 说：

2010年10月29日于10:32

[...] 下文与以上并无关系。先说一些（未知尺寸元素）垂直居中的思路： 1. 我们一般会设置height=line-height来使一行内文字可以垂直居中，那能不能推而广之呢？遗憾，单纯设置外层height=line-height使image等可置换元素垂直居中，在ie6下是行不通的。见小结line-height和vertical-align, image等可置换元素尚且不行，更别提div等块级元素了。 2. 利用display的一个属性：table-cell。其实这个方法用来支持垂直居中，那是舍我其谁啊，可以ie8以下的浏览器并不支持display:table-cell; 我们可以看一下： [...]
小潘说：

2012年07月24日于16:16

太好了！

回复
如何将图片和input完美居中？ - web前端 - 开发者问答说：

2013年05月2日于16:24

[...] 回复：是需要用vertical-align http://www.cssass.com/blog/index.php/2010/490.html [...]
为什么IE6不支持LINE-HEIGHT - web前端 - 开发者问答说：

2013年05月20日于20:29

[...] 对于line-height略有总结 http://www.cssass.com/blog/index.php/2010/490.html 本条目发布于 2010 年 7 月 17 日。属于 web前端分类。作者是 [...]