css中的valign和vertical区别在哪里????

html-css05

css中的valign和vertical区别在哪里????,第1张

valign和vertical效果其实是一样的,至于区别该怎么说呢,有点不好解释了,我直接举例好了

<table>

<tr>

<td valign="top">文本</td>

</tr>

</table>

<table>

<tr>

<td style="vertical-align:top">文本</td>

</tr>

</table>

vertical-align和valign用于文本的对齐,比如vertical-align:top顶端对齐;vertical-align:bottom底端对齐;vertical-align:middle中部对齐或者说是居中;valign=“top”等也一样;

valign属于一种特性,现在很多新版本的浏览器都不支持这种特性了,所以你最好不要直接使用类似 valign="top"这种直插式的样式,严格按照标准写样式,比如 style="vertical-align:top"或者调用样式表

<td class="top1">文本</td>

.top1{vertical-align:top}

html页面代码量尽量精简,所有样式都调用样式表

应该是这样写:

<td style="vertical-align:top">

vertical-align

基本特性

初始值: baseline 适用于: 内联元素和单元格元素(inline-level and 'table-cell' elements )

继承性: 无 百分比: 根据元素自己的行高(refer to the 'line-height' of the element itself )

媒体: visual 版本: CSS1/CSS2

兼容性: IE4+ NS4+

基本语法

vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

语法取值

auto :  CSS1 根据 layout-flow 属性的值对齐对象内容

baseline :  CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐

sub :  CSS1 垂直对齐文本的下标

super:  CSS1 垂直对齐文本的上标

top :  CSS1 将支持 valign 特性的对象的内容对象顶端对齐

text-top :  CSS1 将支持 valign 特性的对象的文本与对象顶端对齐

middle :  CSS1 将支持 valign 特性的对象的内容与对象中部对齐

bottom :  CSS1 将支持 valign 特性的对象的内容与对象底端对齐

text-bottom :  CSS1 将支持 valign 特性的对象的文本与对象顶端对齐

length :  CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。

定义由基线算起的偏移量。基线对于数值来说为0,

对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数

使用说明

设置或检索对象内容的垂直对其方式。对于 currentStyle 对象而言此属性的默认值为 auto 。对于其他对象而言是 baseline 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 verticalAlign 。