css vertical-align属性基础介绍

电玩女神 2022-08-07 05:44 327阅读 0赞

![Center][]

按照W3C的定义，当内联元素的vertical-align设置为:baseline,top,bottom的时候，都是该元素的baseline（或middle，top,bottom）对其周围元素的相同位置，如图片的top和周围文字的top对齐。 text-top和text-bottom的时候，是该元素的top（或bottom）对齐周围元素的text-top（或text-bottom）。 长度（%, em, ex)的时候，是基于baseline往上移动，所以正数往上，负数往下。 middle的时候，是该元素的中心对齐周围元素的中心。这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即  小写字母“x”的正中心  。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（以上图为例，x的高度应该是10px，而em是18px，所以两个值不一样）。

但是，即使是按照上面的准则，各个浏览器的解释如此迥异也让我匪夷所思。我也懒得去研究为什么是这样子。总的来说呢，应该就是它们对字体的每一条线的位置的定义都不大一样，所以这个问题不单跟vertical-align有关，而跟浏览器对内联文本和内联图片的结构的解释有很大关系。

有时候vertical-align属性不起作用，原因是：

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

虽然vertical-align属性只会在inline-block水平的元素上起作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的

<table style="margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 值</th> 
 <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> baseline</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 默认。元素放置在父元素的基线上。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> sub</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 垂直对齐文本的下标。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> super</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 垂直对齐文本的上标</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> top</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 把元素的顶端与行中最高元素的顶端对齐</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> text-top</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 把元素的顶端与父元素字体的顶端对齐</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> middle</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 把此元素放置在父元素的中部。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> bottom</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 把元素的顶端与行中最低的元素的顶端对齐。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> text-bottom</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 把元素的底端与父元素字体的底端对齐。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> length</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> &nbsp;</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> %</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> inherit</td> 
 <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 规定应该从父元素继承 vertical-align 属性的值。</td> 
 </tr> 
 </tbody> 
</table>

元素默认的垂直对齐方式为基线对齐。注意垂直对齐属性只对行内元素有效。不能被继承。

例：垂直对齐<span >上标

元素默认为行内元素

[![/web/css/text/img/text\_035.gif][web_css_text_img_text_035.gif]][web_css_text_img_text_035.gif]

属性值详解

[![/web/css/text/img/text\_036.gif][web_css_text_img_text_036.gif]][web_css_text_img_text_036.gif]

1.基线对齐（vertical-align:baseline）

使元素的基线同父元素的基线对齐，例如：

p strong \{  
line-height : 7em;  
font-size : 2em;  
vertical-align : baseline;  
\}  
基线对齐vertical-align:baseline;

显示如下：

[![/web/css/text/img/text\_037.gif][web_css_text_img_text_037.gif]][web_css_text_img_text_037.gif]

2.顶端对齐（vertical-align:top）

将元素的行内框的顶端与行框的顶端对齐。例如：

p \{  
line-height : 7em;  
\}  
p strong \{  
vertical-align:top;  
line-height:2em;  
\}  
p img \{  
vertical-align : top;  
\}  
顶端对齐：vertical- align:top;<img src="img/ddcat\_anim.gif" alt="图 片" width="88" height="31" />

显示如下：

[![/web/css/text/img/text\_038.gif][web_css_text_img_text_038.gif]][web_css_text_img_text_038.gif]

对于元素，不仅设定了vertical-align，还设定了line-height，这是因为在本章 \[7.3.2 内容区域、行内框和行框\]一节中关于行内框的说明中介绍过，行高可以改变行内框的高度，如果不重新设定行高， 则元素继承了父元素的行高，因此行内框高和行框的高度是一样的，则顶端对齐将看不出效果。

3.文本顶端对齐(vertical-align:text-top)

将元素行内框的顶端同文本行的顶线对齐，例如:

p \{  
line-height : 7em;  
\}  
p strong \{  
vertical-align : text-top;  
line-height : 2em;  
\}  
p img \{  
vertical-align : text-top;  
\}  
文本顶端对齐： vertical- align:top;<img src="img/ddcat\_anim.gif" alt="图 片" width="88" height="31" />

显示如下：

[![/web/css/text/img/text\_039.gif][web_css_text_img_text_039.gif]][web_css_text_img_text_039.gif]

4.底端对齐(vertical-align:bottom)

底端对齐与顶端对齐相反

[![/web/css/text/img/text\_040.gif][web_css_text_img_text_040.gif]][web_css_text_img_text_040.gif]

5.文本底端对齐（vertical-align:text-bottom）

文本底端对齐与文本顶端对齐相反。

[![/web/css/text/img/text\_041.gif][web_css_text_img_text_041.gif]][web_css_text_img_text_041.gif]

6.中间对齐(vertical-align:middle)

中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐，例如有XHTML代码如下:

p img \{ vertical-align : middle; \}  
中间对齐为基线上方0.5ex处<img src="img/ddcat\_ad.gif" alt="图片" width="180" height="60" />

[![/web/css/text/img/text\_042.gif][web_css_text_img_text_042.gif]][web_css_text_img_text_042.gif]

中线的定义为：中线位于基线的上方，与基线的距离为小写字母x高度（即ex）的一半，如图7-36所示。而ex同字体尺寸相关，大部分浏览器认为1ex = 0.5em，因此会将基线以上四分之一em处作为中线来对齐。

注意：同在行高显示上的差别一样，在中间对齐上，各浏览器之间也稍有些差异。

7.上标和下标

上标（vertical-align:super）使元素的基线（替换元素的底端）相对于父元素的基线升高，下标(vertical-align:sub)使元素的基线降低，移动的幅度CSS规范中美誉哦规定，由浏览器来决定，例如：

上标文字<span >vertical-align:super;下标文 字<span >vertical-align:sub;

[![/web/css/text/img/text\_043.gif][web_css_text_img_text_043.gif]][web_css_text_img_text_043.gif]

上下标不会改变元素文字的尺寸大小

8. 长度值和百分比   
  
和上下标类似，长度值和百分比值可使元素的基线（替换元素的底端）相对于父元素的基线升高（正值）或者降低（负值）。   
上下标的移动尺寸是由浏览器确定的，而设定长度值或者百分比，可以精确控制文字上下移动的幅度。   
百分比与行高有关，例如有如下代码，其显示如图

p \{ line-height : 2em; \}  
行高2em，纵向百分比对齐：<span >100% 正数向上，而<span >-100%负数向下& lt;/span>。

[![/web/css/text/img/text\_044.gif][web_css_text_img_text_044.gif]][web_css_text_img_text_044.gif]

设置垂直对齐会影响到行框高，例如有如下代码，其显示如图7-45所示。

p \{ line-height : 2em; \}  
垂直对齐<span >正数向上</span& gt;，而<span >负数向下。行高2em，而设置垂直对齐的文字撑开了行框。

[![/web/css/text/img/text\_045.gif][web_css_text_img_text_045.gif]][web_css_text_img_text_045.gif]

注意：在IE中设定百分比或者数值对齐会造成内容的叠加混乱

[![/web/css/text/img/text\_046.gif][web_css_text_img_text_046.gif]][web_css_text_img_text_046.gif]

[Center]: /images/20220805/cf363b7534784aa78924982689411098.png
[web_css_text_img_text_035.gif]: /images/20220805/d3d876749c7642a2a4147c77cb36aabd.png
[web_css_text_img_text_036.gif]: /images/20220805/63bd016956264a888c8340b89a38102d.png
[web_css_text_img_text_037.gif]: /images/20220805/fd2b9aeea5184fbdb32faec73cf4baaf.png
[web_css_text_img_text_038.gif]: /images/20220805/d81a547b6c9a4570b67be8b6b3726c52.png
[web_css_text_img_text_039.gif]: /images/20220805/4c0ca684fb924754b63ef8c8144aff9d.png
[web_css_text_img_text_040.gif]: /images/20220805/7da55b6997294d9989d7b93092a9763e.png
[web_css_text_img_text_041.gif]: /images/20220805/7d22190af8494666a4ab99d9eca5b5b8.png
[web_css_text_img_text_042.gif]: /images/20220805/b3a0aa6b5c384b80b0f4104ea2332edf.png
[web_css_text_img_text_043.gif]: /images/20220805/1eb2fa447c8140df81d6baf8f537635f.png
[web_css_text_img_text_044.gif]: /images/20220805/a8eb668540204050bc35a6188d2bdee4.png
[web_css_text_img_text_045.gif]: /images/20220805/20a5937c53394c889b0f8a2782decd49.png
[web_css_text_img_text_046.gif]: /images/20220805/3a6cc0ea73ab4cce9f58d5b3598d8ea5.png