CSS 垂直对齐vertical-align属性

在CSS中，行框的高度总是足以容纳它包含的所有行内级框，当一个行内级框 B 的高度小于包含它的行框高度时，则由 vertical-align属性来决定B在行框中垂直对齐的位置。因此，vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。

在垂直对齐时，行内非替换元素的行内级框是由 line-height 的高度定义的框，即在内容区的上下各添加半行距后的框；其他行内级元素的行内级框是由 margin-box 定义的框。因此，对一个行内级框来说，top 是指框的上边界，bottom 是指框的下边界，text-top 是指内容区的上边界，text-bottom 是指内容区的下边界。

由于替换元素没有 baseline，因此，就把它的 bottom 作为 baseline，即 baseline 和 bottom 的位置相同。

middle 是指框高度一半的位置，对于替换元素，就是 height 的一半的位置，而非替换元素则是基于 baseline 往上移动 0.5ex，即小写字母 x 的正中心。但是，很多浏览器往往把 ex 这个单位定义为0.5em，导致 middle 其实不一定是 x 的正中心。如图 3‑15 所示：

图3-15 行内级框

vertical-align属性可以使用长度值、百分比、或预定义关键字，来定义行内级框的垂直对齐方式。该属性的默认值是 baseline，也就是说，默认情况下，所有行内级框的基线都与父元素的基线对齐。

使用长度值和百分比时，通过让行内级框的基线相对父元素的基线，升高或降低指定的距离，来决定行内级框在行框中的位置。距离可以是正值，也可以是负值。正值使行内级框相对父元素的基线升高，负值则降低。

使用长度值时，可以使用绝对单位或相对单位，来指定升高或降低的距离，0cm 等同于 baseline。假设在一个段落中，包含一个 span 元素：

xghxgh</code>

假设设置段落的字体大小为 120px，span 元素的字体大小为 40px、vertical-align 的值为 20px：

p {
font-size: 120px;
}
span {
font-size: 40px;
vertical-align: 20px;
}

由于vertical-align 的值为 20px，所以，行内框 span 的基线相对父元素的基线升高 20px。运行结果如图 3‑16 所示：

图3-16 vertical-align为长度值

使用百分比时，升高或降低的距离是根据行内元素的 line-height 进行计算，0% 等同于 baseline。

如果把 span 元素的 line-height 设置为 1，vertical-align 设置为 50%，则得到的行高为 40px，进而得到升高的距离为 50% * 40px = 20px，也会得到相同的效果。

span {
line-height: 1;
font-size: 40px;
vertical-align: 50%;
}

表 3-4 vertical-align属性值及含义
属性值	含义
baseline	基线对齐。行内框的基线与父元素的基线对齐
sub	下标对齐。将行内框的基线下降到父元素适合下标的位置
super	上标对齐。将行内框的基线上升到父元素适合下标的位置
top	顶部对齐。行内框的顶线与行框的顶线对齐。
text-top	文本顶部对齐。行内框的顶线与父元素的text-top对齐
middle	居中对齐。行内框的中线与父元素的中线对齐
bottom	底部对齐。行内框的底线与行框的底线对齐
text-bottom	文本底部对齐。行内框的底线与父元素的text-bottom对齐

基线对齐要求一个行内级框的基线与行框的基线对齐，而对于图像和表单输入元素和其他替换元素，由于它们本身没有基线，则将它们的底线与行框的基线对齐。这就使得浏览器总把替换元素的底线放在基线上，即便该行中没有其他文本。

上标对齐和下标对齐时，是行内元素的基线（图片和文本输入框的底线）相对于行框的基线上移或下移。而行内元素基线相对于行框的基线移动的距离，CSS规范中未明确规定，由浏览器自行决定，可能会因为浏览器的不同而不同。从上图的运行结果看，在Google Chrome浏览器下，移动的距离约为 1ex。

middle居中对齐，是行内元素的中线与行框的中线对齐。前面已经介绍，元素的中线与基线的距离为小写字母x高度（即ex）的一半，而大部分浏览器简单的认为1ex = 1em，因此会将基线以上二分之一em处（其实不一定是x的正中心），作为文本的中线。前面已经介绍，一个框的高度是由line-height决定的，如果增加行高，框的高度会增加，顶线就会上移，底线会下移。无论底线下移多少，bottom对齐，始终是元素的底线与行框的底线对齐；top对齐，始终是元素的顶线与行框的顶线对齐。增加行高时，行框的高度会增加，但内容区的高度始终保持不变，text-top对齐就是行内元素的顶线与行框文本的顶线对齐。

垂直对齐的预定义关键字看似简单，其实很难理解，处理起来也很棘手。下面通过一个简单实例，来看看每个预定义关键字的效果。假设在一个段落中，有 8 个 span 元素：

xghbaseline…top

为段落定义 1.8 倍的行距，并让每个子元素 span 以不同的方式垂直对齐。由于子元素 span 会继承父元素的 line-height 属性，因此，把 span 元素的行距重置为1：

p {
line-height: 1.8;
font-size: 90px;
font-family: "Times New Roman";
border: 1px solid #444;
}
span {
line-height: 1;
color: #00f;
font-size: 20px;
}
span:nth-child(1) {
vertical-align: baseline;
}
…
span:nth-child(8) {
vertical-align: top;
}

在Google Chrome浏览器下的运行效果如图 3‑17 所示：

图3-17 vertical-align属性效果

虽然W3C规范对 vertical-align属性已经定义得非常清楚，然而，现实的情况是，不同浏览器的解释却千差万别，甚至与规范相去万里。比如，在增加行高时，行框的高度会增加，text-top对齐将会是行内元素的顶线与行框文本的顶线对齐。但从运行结果看，并不是这个样子，似乎是行内元素的基线与行框文本的顶线对齐。

在所有的CSS属性中，vertical-align属性是最让人费解的一个，因为几乎在所有浏览器下的表现都各不相同，让人匪夷所思。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 垂直对齐vertical-align属性相关推荐

php垂直对齐,CSS垂直对齐不起作用的原因及解决方法
verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因我想很多人都会 ...
css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)
CSS 水平对齐 (Horizontal Align) 关于 CSS 中元素的水平对齐 (Horizontal Align),你可以使用多种属性来进行设置. 在CSS中,有几个属性用于元素水平对齐. ...
垂直对齐：vertical-align属性（转）
原文地址为: 垂直对齐:vertical-align属性(转) 行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线对齐 ...
html如何设置自动对齐,HTML5 教程之CSS 水平对齐(Horizontal Align)
CSS 水平对齐(Horizontal Align) 在CSS中,有几个属性用于元素水平对齐. 块元素对齐块元素是一个元素,占用了全宽,前后都是换行符. 块元素的例子: 文本对齐,请参阅 CSS文本 ...
html中设置图片的对齐方式,align属性怎么用图片align属性到底是什么意思
中align属性怎么使用?如下列代码: stock: W3C官方给出的解释是:所有浏览器都支持 align 属性的 "left" 和 "right" 值,除了 ...
html中css设置文本对齐,css文本对齐使用哪个属性
CSS文本属性中,文本对齐属性的取值有( )A. autotext-align: 属性有 B C D E css中怎么让div里面的文字底部对齐两种办法,第一种可以作为默认选择.两种办法都可以让文字 ...
1、垂直对齐方式 vertical-align属性
常用的值: vertical-align: baseline; 默认值,基线对齐英文字母x的下端 vertical-align: top; 顶端对齐 vertical-align: bottom; ...
web 垂直对齐方式 vertical-align属性
常用的值: vertical-align: baseline; 默认值,基线对齐英文字母x的下端 vertical-align: top; 顶端对齐 vertical-align: bottom; ...
图片在框内平行css,CSS行内垂直对齐
关于CSS行内对齐这一个话题,接触已久,只是一直以来没有什么兴趣来整理成文. 说到垂直对齐问题,在CSS中指的是行内垂直对齐,相关属性有 font-size.line-height.vertical. ...

CSS 垂直对齐vertical-align属性

CSS 垂直对齐vertical-align属性相关推荐

最新文章

热门文章