首页 > web前端 > css教程 > 正文

解读css中的vertical-align属性

零下一度
发布: 2017-06-19 15:57:18
原创
1852 人浏览过

语法: 

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
登录后复制

参数: 
baseline :  将支持valign特性的对象的内容与基线对齐 
sub :  垂直对齐文本的下标 
super :  垂直对齐文本的上标 
top :  将支持valign特性的对象的内容与对象顶端对齐 
text-top :  将支持valign特性的对象的文本与对象顶端对齐 
middle :  将支持valign特性的对象的内容与对象中部对齐 
bottom :  将支持valign特性的对象的文本与对象底端对齐 
text-bottom :  将支持valign特性的对象的文本与对象顶端对齐 
length :  CSS2 由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位 
 
说明: 
 
设置或检索对象内容的垂直对其方式。 
对应的脚本特性为verticalAlign。请参阅我编写的其他书目。 
 
示例: 

td { vertical-align : center; }
登录后复制

css 为什么给span加vertical-align: middle不起作用? 

vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用。所以要实现上下垂直居中对齐,可以采用如下样式

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/
登录后复制

上面的设置方式相比设置line-height属性,可以兼容文字有多行的情形。

下面举例说明:

创建Html元素

<div>
    <span>测试测试,即便是多行,我也还是垂直居中对齐的。</span>
</div>
登录后复制

设置css样式

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;
登录后复制

  vertical-align: top;什么意思

vertical-align这个是设置元素的垂直排列的.
用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.
它的值比较多:baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit 
比如说top就是垂直对齐文本的顶部 .
在表格中,这个属性设置单元格内容的对齐方式.vertical-align应用最多的应该是在td内,控制内部对象位置.
这个属性在各个浏览器中的效果都不大一样,所以慎重使用

以上是解读css中的vertical-align属性的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板