与公事的顶端对齐

7.4.1 语 法

vertical-align属性的切实定义列表如下:

语法: vertical-align
: baseline | sub | super | top | text- top | middle | bottom |
text-bottom | <百分比> | <长度> | inherit
表达: 设置成分内容的垂直对齐情势
值:
baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与公事的顶端对齐;middle:中部对
齐;bottom:底端对齐;text-bottom:文本的底端对齐;
比例和长短: CSS2,可为负数。
初始值: baseline
继承性: 不继承
适用于: 行内成分和单元格(table-cell)成分
媒体: 视觉
计算值: 百分比和长短值为相对长度;其余同内定值

此间须要尤其注意的是:垂直对齐属性只对行内成分
效。例如有如下代码:

<p
style=”vertical-align:super;”>垂直对齐<span>上标</span></p&
gt;

<p>成分默认为块级成分,因而在浏览器内浏览时将不会有此外变
化。而正如代码:

style=”font-family: ‘courier new’, courier;”><p>垂直对齐<span
style=”vertical-align:super;”>上标</span></p>

<span>成分暗中认可为行内成分,由此显得如图7-35所示。

图片 1
图7-35垂直对齐属性只对行内成分有效

行内成分还包涵图片、表单输入成分等,同时,垂直对齐不可能被持续。

7.4.2 属
性值详解

在[7.3 行高
line-height]一节中,曾经介绍了文本的基线、顶线、中线和下线,还有内容区域、行内框和行框,而本节的垂直对齐和那多少个概念密切相关。

垂直对齐主要属性值的表现方式如图7-36所示。

图片 2

 

(1). 基线对齐
(vertical-align : baseline)

基线对齐(vertical-align :
baseline)使成分的基线同父成分的基线对齐,例如有如下代码:

p strong {
line-height : 7em;
font-size : 2em;
vertical-align : baseline;
}

<p>基线对
齐<strong>vertical-align:baseline;</strong></p>

则其出示如图7-37所示。

图片 3
图7-37
基线对齐

而像图片可能输入框那样的因素,本人并未基线,则将其底端同父成分的基线对齐,
如图7-34所示。

(2). 顶端对齐
(vertical-align : top)

上边对齐(vertical-align :
top)是将成分的行内框的顶端与行框的上方对齐,例如有如下代码:

p {
line-height : 7em;
}
p strong {
vertical-align:top;
line-height:2em;
}
p img {
vertical-align : top;
}

style=”font-family: ‘courier new’, courier;”><p>顶端对齐:<strong>vertical-
align:top;</strong><img src=”img/ddcat_anim.gif” alt=”图片”
width=”88″ height=”31″ /></p>

则其出示如图7-38所示。

图片 4
图7-38
顶端对齐

对于<strong>元素,不仅设定了vertical-
align,还设定了line-height,那是因为在本章 [7.3.2
内容区域、行内框和行框]一节中有关行内框的印证中介绍过,行高能够变动行内框的可观,假诺不重复设定行高,则<strong>元素继承了父
成分<p>的行高,由此行内框高和行框的莫斯中国科学技术大学学是同一的,则顶端对齐将看不出效果。

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

文本顶端对齐(vertical-align
:
text-top)是将成分行内框的上方同文本行的顶线对齐,例如有如下代码,其出示如图7-39所示。

p {
line-height : 7em;
}
p strong {
vertical-align : text-top;
line-height : 2em;
}
p img {
vertical-align : text-top;
}

style=”font-family: ‘courier new’, courier;”><p>文本顶端对齐:<strong>
vertical- align:top;</strong><img src=”img/ddcat_anim.gif”
alt=”图片” width=”88″ height=”31″ /></p>

图片 5
图7-39
文本顶端对齐

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

底端对齐(vertical-align :
bottom)与上方对齐(vertical-align : top)相反,如图7-40所示。

图片 6
图7-40
底端对齐

(5). 文本底端对齐
(vertical-align : text-bottom)

文本底端对齐(vertical-align
: text-bottom)与公事顶端对齐(vertical-align :
text-top)相反,如图7-41所示。

图片 7
图7-41
文本底端对齐

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

个中对齐(vertical-align :
middle)平常选用在图片上,将图纸的垂直方向的中线与文本行的中线对齐,例如有XHTML代码如下,其出示如图7-42所示。

p img {
vertical-align : middle; }

style=”font-family: ‘courier new’, courier;”><p>中间对齐为基线上方0.5ex处<img
src=”img/ddcat_ad.gif” alt=”图片” width=”180″ height=”60″
/></p>

图片 8
图7-4第22中学间对齐

中线的定义为:中线位于基线的顶端,与基线的偏离为小写字母x低度(即ex)的
十分之五,如图7-36所示。而ex同字体尺寸相关,大多数浏览器认为1ex =
0.5em,因而会将基线以上四分一em处作为中线来对齐。

注意:同在行高展现上的差距一样,在中等对
齐上,各浏览器之间也稍有些差别。

(7). 上标和下标

上标(vertical-align:super)使成分的基线(替换到分的底
端)相对于父元素的基线升高,下标(vertical-align:sub)使成分的基线下跌,移动的宽窄CSS规范中向来不鲜明,由浏览器来决定。例如有
如下代码,其出示如图7-43所示。

style=”font-family: ‘courier new’, courier;”><p>上标文字<span
style=”vertical-
align:super;”>vertical-align:super;</span>下标文字<span
style=”vertical-align:sub;”>vertical-align:sub;</span></p>

图片 9
图7-43
上标和下标

上下标不会转移成分文字的尺码大小。

(8). 长度值和比例

和上下标类似,长度值和百分比率可使成分的基线(替换元素的底端)相对于父元素的基线进步(正值)恐怕下跌(负值)。

上下标的移动尺寸是由浏览器分明的,而设定长度值或然百分比,能够精确控制文字
上下移动的幅度。

比例与行高有关,例如有如下代码,其出示如图7-44所示。

p { line-height :
2em; }

style=”font-family: ‘courier new’, courier;”><p>行高2em,纵向百分比对
齐:<span style=”vertical-align:百分百;”>百分百正数向上</span>,而<span
style=”vertical-align:-百分之百;”>-百分之百负数向下&
lt;/span>。</p>

图片 10
图7-44
百分比对齐

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

p { line-height :
2em; }

style=”font-family: ‘courier new’, courier;”><p>垂直对齐<span
style=”vertical-align:2em;”>正数向上</span& gt;,而<span
style=”vertical-align:-2em;”>负数向下</span>。<
p>行高2em,而设置垂直对齐的文字撑开了行框。</p>

图片 11
图7-45
垂直对齐对行框的影响

小心:在IE中设定百分比或许数值对齐会造成内容的附加混
乱,如图7-46所示。

图片 12
图7-46在IE中设定百分比照旧数值对齐

 图片 13

 

发明本文转自:http://hi.baidu.com/wolongxzg/item/2383860ec8ac8b173a53eeb0

vertical-align
7.4.1 语法
vertical-align属性的切实可行定义列表如下:
语法: vertical-align : baseline | sub | super | top | text- top |
middle | bottom | text-bottom | <百分比> | <长度
> | inherit
证实: 设置成分内容的垂直对齐方式
值:
baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与公事的上面对齐;middle:中部对齐;
bottom:底端对齐;text-bottom:文本的底端对齐;
比例和长度: CSS2,可为负数。
初始值: baseline
继承性: 不继承
适用于: 行内成分和单元格(table-cell)成分
媒体: 视觉
计算值: 百分比和长短值为绝对长度;其余同内定值
此处须要特别注意的是:垂直对齐属性只对行内成分有效。例如有如下代码:
    <p
style=”vertical-align:super;”>垂直对齐<span>上标</span></p>
<p>成分私下认可为块级成分,由此在浏览器内浏览时将不会有其余变动。而正如代码:
    <p>垂直对齐<span
style=”vertical-align:super;”>上标</span></p>
<span>成分暗中认可为行内成分,由此显得如图7-35所示。
图片 14
clip_image019
图7-35笔直对齐属性只对行内成分有效
行内成分还包涵图片、表单输入成分等,同时,垂直对齐不可能被接续。
7.4.2 属性值详解
在[7.3 行高
line-height]一节中,曾经介绍了文本的基线、顶线、中线和底线,还有内容区域、行内框和行框,而本节的垂直对
齐和这多少个概念密切相关。
垂直对齐首要属性值的表现方式如图7-36所示。
图片 15
clip_image020
图7-36 垂直对齐的要紧属性值示意
(1). 基线对齐(vertical-align : baseline)
基线对齐(vertical-align :
baseline)使成分的基线同父成分的基线对齐,例如有如下代码:
    p strong {
    line-height : 7em;
    font-size : 2em;
    vertical-align : baseline;
    }
   
<p>基线对齐<strong>vertical-align:baseline;</strong></p>
则其出示如图7-37所示。
图片 16
clip_image021
图7-37 基线对齐
而像图片或然输入框那样的因素,自身并未基线,则将其底端同父元素的基线对齐,如图7-34所示。
(2). 顶端对齐(vertical-align : top)
上边对齐(vertical-align :
top)是将元素的行内框的顶端与行框的顶端对齐,例如有如下代码:
    p {
    line-height : 7em;
    }
    p strong {
    vertical-align:top;
    line-height:2em;
    }
    p img {
    vertical-align : top;
    }
    <p>顶端对齐:<strong>vertical-
align:top;</strong><img src=”img/ddcat_anim.gif” alt=”图片”
width=”88″
height=”31″ /></p>
则其出示如图7-38所示。
图片 17
clip_image022
图7-38 顶端对齐
对于<strong>成分,不仅设定了vertical-align,还设定了line-height,那是因为在本章
[7.3.2 内容区域、行内框和行框]一节
中关于行内框的求证中介绍过,行高能够转移行内框的可观,假若不另行设定行高,则<strong>成分继承了父成分<p>的行高,因而
行内框高和行框的可观是千篇一律的,则顶端对齐将看不出效果。
(3). 文本顶端对齐(vertical-align : text-top)
文件顶端对齐(vertical-align :
text-top)是将成分行内框的上方同文本行的顶线对齐,例如有如下代码,其出示如图7-39所示

    p {
    line-height : 7em;
    }
    p strong {
    vertical-align : text-top;
    line-height : 2em;
    }
    p img {
    vertical-align : text-top;
    }
    <p>文本顶端对齐:<strong> vertical-
align:top;</strong><img src=”img/ddcat_anim.gif” alt=”图片”
width=”88
″ height=”31″ /></p>
图片 18
图7-39 文本顶端对齐
(4). 底端对齐(vertical-align : bottom)
底端对齐(vertical-align : bottom)与上方对齐(vertical-align :
top)相反,如图7-40所示。
图片 19
图7-40 底端对齐
(5). 文本底端对齐(vertical-align : text-bottom)
文件底端对齐(vertical-align :
text-bottom)与公事顶端对齐(vertical-align :
text-top)相反,如图7-41所示。
图片 20
图7-41 文本底端对齐
(6). 中间对齐(vertical-align : middle)
高级中学级对齐(vertical-align :
middle)经常采纳在图片上,将图纸的垂直方向的中线与文本行的中线对齐,例如有XHTML代码如下
,其出示如图7-42所示。
    p img { vertical-align : middle; }
    <p>中间对齐为基线上方0.5ex处<img src=”img/ddcat_ad.gif”
alt=”图片” width=”180″ height=”60″ /></p>
图片 21
图7-42 中间对齐
中线的定义为:中线位于基线的上方,与基线的离开为小写字母x中度(即ex)的一半,如图7-36所示。而ex同字体尺寸相关,大部
分浏览器认为1ex = 0.5em,由此会将基线以上肆分一em处作为中线来对齐。
只顾:同在行高呈现上的距离一样,在中等对齐上,各浏览器之间也稍有个别差别。
(7). 上标和下标
上标(vertical-align:super)使成分的基线(替换元素的底端)相对于父成分的基线升高,下标(vertical-align:sub)使成分
的基线下跌,移动的大幅CSS规范中并未分明,由浏览器来支配。例如有如下代码,其出示如图7-43所示。
    <p>上标文字<span style=”vertical-
align:super;”>vertical-align:super;</span>下标文字<span
style=”vertical-
align:sub;”>vertical-align:sub;</span></p>
图片 22
图7-43 上标和下标
上下标不会转移成分文字的尺码大小。
(8). 长度值和比重
和前后标类似,长度值和百分比率可使成分的基线(替换来分的底端)相对于父成分的基线进步(正值)大概下降(负值)。
上下标的位移尺寸是由浏览器鲜明的,而设定长度值可能百分比,能够确切控制文字上下运动的增长幅度。
比例与行高有关,例如有如下代码,其出示如图7-44所示。
    p { line-height : 2em; }
    <p>行高2em,纵向百分比对齐:<span
style=”vertical-align:百分百;”>百分之百 正数向上</span>,而<span
style=”vertical-align:-百分之百;”>-百分百负数向下&
lt;/span>。</p>
图片 23
图7-44 百分比对齐
安装垂直对齐会影响到行框高,例如有如下代码,其出示如图7-45所示。
    p { line-height : 2em; }
    <p>垂直对齐<span
style=”vertical-align:2em;”>正数向上</span& gt;,而<span
style=”vertical-align:-2em;”>负数
向下</span>。<
p>行高2em,而设置垂直对齐的文字撑开了行框。</p>
图片 24
图7-45 垂直对齐对行框的影响
只顾:在IE中设定百分比恐怕数值对齐会造成内容的叠加纷繁扬扬,如图7-46所示。
图片 25
图7-46在IE中设定百分比照旧数值对齐

相关文章