CSSvertical-align属性的用法 css中vertical align

CSSvertical-align属性的用法 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:1px blue 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*撑开/

}

  

爱华网本文地址 » http://www.413yy.cn/a/25101015/240152.html

更多阅读

EXCEL表中LEFT和RIGHT函数的用法 left和right函数

在用EXCEL表中的时候,懂得一些常用的函数,会给你的工作带来很大便利。就像上次偶然的机会,听同事说道LEFT和RIGHT函数的用法,还挺有用的。像导出的财务数据,日期的格式都是2010-01-01,但是如果你只需要年月,不需要日期,你可以插入另外一列,适用

英语中副词的用法 英语中形容词的用法

英语中副词的用法——简介副词(adverb)是一类用以修饰动词(相当于英语的verb)或加强描绘词组或整个句子的词,修饰名词的词一般为形容词,又称限制词。 英语中副词的用法——方法/步骤英语中副词的用法 1、一般副词的位置  在许多情

SQL中DISTINCT关键字的用法 linq distinct 用法

Select中DISTINCT关键字的用法?distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用它来返回不重复记录的条数,而不是用它来返回不重记录的所有值。其原因是distinct只能返回它的目标字段,而无法返回其它字段下面先来看

声明:《CSSvertical-align属性的用法 css中vertical align》为网友月光终成沙漠分享!如侵犯到您的合法权益请联系我们删除