vertical-align属性baseline(转)

图7-34 文字和图片内容默认垂直对齐方式为基线对齐

上一小节讲解了行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线对齐,如图7-34所示。

这是因为,元素默认的垂直对齐方式为基线对齐(vertical-align: baseline)。

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所示。

图7-35垂直对齐属性只对行内元素有效

行内元素还包括图片、表单输入元素等,同时,垂直对齐不能被继承。

7.4.2 属性值详解

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

图7-36 垂直对齐的主要属性值示意

垂直对齐主要属性值的表现形式如图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 基线对齐

则其显示如图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所示。

图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>

图7-39 文本顶端对齐

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

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

图7-40 底端对齐

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

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

图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>

图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>

图7-43 上标和下标

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

8. 长度值和百分比

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

p { line-height : 2em; }
<p>行高2em,纵向百分比对齐:<span style="vertical-align:100%;">100%正数向上</span>,而<span style="vertical-align:-100%;">-100%负数向下</span>。</p>

图7-44 百分比对齐

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

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

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

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

图7-46 IE中的叠加混乱

时间: 2024-10-29 19:09:43

vertical-align属性baseline(转)的相关文章

html基础 设置img的align属性,left,right 实现图文混排的效果

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ ex1: code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; chars

HTML &lt;p&gt; 标签的 align 属性

align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify 对行进行伸展,这样每行都可以有相等的长度 用法 <p align="justify"> 使用之前 使用之后

&lt;img&gt;标签的align属性

align 属性用于定义图像相对应文本的位置 <p>图像 <img src="eg_cute.gif" align="bottom"> 在文本中</p> <p>图像 <img src ="eg_cute.gif" align="middle"> 在文本中</p> <p>图像 <img src ="eg_cute.gif"

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

img 的 align 属性

AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐. AbsMiddle 图像的中间与同一行中最大元素的中间对齐. Baseline 图像的下边缘与第一行文本的下边缘对齐. Bottom 图像的下边缘与第一行文本的下边缘对齐. Left 图像沿网页的左边缘对齐,文字在图像右边换行. Middle 图像的中间与第一行文本的下边缘对齐. NotSet 未设定对齐方式. Right 图像沿网页的右边缘对齐,文字在图像左边换行. TextTop 图像的上边缘与同一行上最高文本的上边缘对齐.

IE 怪异模式(Quirks Mode)对 HTML 页面的影响

本文主要描述 Quirks Mode 和 Standards Mode 这两种文档模式渲染页面时的差异由来,并且给出一些详细的例子说明差异所在.通过阅读本文,Web 开发工程师可以对浏览器工作原理有更为深刻的理解,避免自己所开发的 Web 应用在不同的浏览器上产生不同的效果. Quirks Mode 概述 定义 什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计.并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式. 历史 由渲

怪异模式(Quirks Mode)对 HTML 页面的影响

Quirks Mode 概述 定义 什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计.并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式. 历史 由渲染引擎产生的两种文档模式 谈到 Quirks modes 首先就要从浏览器渲染引擎说起.我们知道所有的浏览器都有自己的页面渲染引擎,渲染引擎主要包含两部分,一部分负责 HTML.CSS 代码的解析,另一部分负责脚本代码解析,这两部分合起来就可以绘制出完整的页面. 表 1 各浏览

inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面,如下所示: 那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮. 我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题. 但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题. 1. 问题现象 我们先给出一个在线实例: http://wow.techbrood.com/fiddle/15438 我们可以看到当给中间的 in

delphi控件属性和事件

常用[属性] Action:该属性是与组件关联的行为,允许应用程序集中响应用户命令 Anchors:与组件连接的窗体的位置点 Align:确定组件的对齐方式 AutoSize:确定组件是否自动调整其大小 BiDiMode:(所有组件) 为从右向左写的语言提供支持 BoundsRect:定义组件边框矩形(只适用于运行时) Borderwidth:(窗口化组件)边框的宽度 BorberStyle:设置组件边框形状(样式) Brush:可确定组件的风格和颜色 Caption:使用该属性可指定标注组件的