CSS vertical-align属性的用法
vertical-align的定义
W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
文本通常根据不可见的基线进行对齐的,而字母的底部位于基线之上。vertical-align属性可以在文字的基线之上或之下提升或降低字母或图像。vertical-align属性的值有baseline、sub、super、top、text-top、middle、bottom、text-bottom、、等,其中初始值为baseline。
baseline(基线)——将子元素的基线与父元素的基线相对齐。对于没有基线的元素,如图像或对象,则使它的底部与父元素的基线对齐。
sub(下面)——把元素置于下方(下标),确切地说是使元素的基线对齐它的父元素首选的下标位置。
super(上面)——把元素置于上方(上标),确切地说是使元素的基线对齐它的父元素首选的上标位置。
text-top(文本顶部)——使元素的顶部与其父元素最高字母的顶部相对齐。
top(顶部)——使元素的顶部与行中最高事物的顶部相对齐。
middle(中间)——使元素垂直居中。
bottom(底部)——使元素的底部与行中最低事物的底部相对齐。
text-bottom(文本底部)——使元素的底部与其父元素字体的底部相对齐。
vertical-align的解读
W3C上对vertical-align的定义,大体上可以分为两个部分:
第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。
第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的,可以打个比喻:假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:
如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:
比如,img和span一起出现,要想文字对齐图片的中间位置,就需要为图片添加img{vertical-align:middle;}
再比如input和span连用时,谷歌火狐IE8以上版本里默认的是span在input的中间位置,但ie6/ie7里,span底部和input底部对齐,实现统一的办法就是给input添加input{vertical-align:middle;},要想它们垂直方向上的中线对齐,就同时也为span设置span{vertical-align:middle;}
vertical-align的使用
1.用于内联元素
下面以图像的垂直对齐为例子说明一下vertical-align属性的用法。
img{ vertical-align:middle;}
<div><imgsrc="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>
2.用于表格
vertical-align属性可以直接用于表格单元格,效果相当于HTML中的valign属性。
td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>
3.用于块元素
vertical-align属性是不适用于块元素的,这就是为什么有些人使用vertical-align属性无效的原因。但是我们可以使用display属性,设置其值为table-cell,将块元素转化为单元格,然后再使用vertical-align属性。
div{width:500px; height:200px; border:1pxblue solid; display: table-cell; vertical-align: middle;}
<div><imgsrc="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>
需要注意的是,上面这种方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这种用法,而Chrome、火狐却能支持。
为了兼容ie6/7可以为div添加以下属性
div{
*display:block; *font-size:175px;/*高度为200px, 则200*0.873约为175px* 撑开/
}
CSS vertical-align属性的用法相关推荐
- html border 边距,css中border-sizing属性的用法
这篇文章给大家介绍的文章内容是关于css中border-sizing属性的用法,有很好的参考价值,希望可以帮助到有需要的朋友. box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子 ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- CSS的before属性的用法
CSS的before属性的用法 上两个例子来解释before属性如何使用: 1.在元素前添加文本 p:before {content:"台词:"; } 2.在元素前添加形状 p:b ...
- android studio table居中代码_html table表格标签内容如何居中显示?表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
- html table表格标签内容如何居中显示?表格的align属性的用法介绍
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
- html5中没有align属性,HTML标签align属性的用法问题
HTML中表格.文字.图像等元素都有使用到align属性,align属性主要是影响设置元素的水平对齐方式,给表格.文字.及图像等元素设置align属性,其表现形式是不一致的. 给表格元素设置align ...
- HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
- html页边距为负值,css中的padding属性可以为负值吗?css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧 首先我们介绍的是第一个问题 ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
最新文章
- 程序员头发失踪之谜 | 每日趣闻
- TimeoutException
- pycharm打开python文件如何自动创建项目_pycharm 怎么自动创建python头文件?
- luogu3233 世界树 (虚树)
- System类+Math类+Arrays类
- Android Activity无法启动。
- hive与hbase数据类型对应关系
- 如何为SUSE配置IP地址,网关和DNS
- hashmap hash冲突怎么解决_对HashMap的思考及手写实现
- 浅谈如何根治慢性扁桃体炎-个人经验总结
- ASTC图片纹理压缩探讨
- 淘宝走过的大数据之路
- 为某一目录创建Internet来宾账户
- 福岛核电站2号机组爆炸 未来三天对我国无影响
- 通过左旋和右旋来实现搜索二叉树的自平衡
- 使用table2excel做excel表格下载
- kratos 配置文件热更新
- 怎么学好计算机专业?
- 迅视资管 绍兴:非遗大市“非遗文章”
- 软件测试面试复习题(一)