您当前的位置: 首页 » HTML/XHTML/XML编程 » vertical-align作用
vertical-align作用
论坛链接
vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom |
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
top：和本行位置最高元素对齐。
bottom：和本行位置最低元素对齐。
如果按照字面意思理解vertical-align:middle就应该是文字在元素的垂直位置的最中央，把入前面那个标签中，它的位置应该在一个height为60px的box的中央啊。但是事实上不是这样的。
如果这个vertical-align:middle用来定义一个单元格td，那么它和你想像的一样起作用，看看下面的例子
<table>
<tr>
<td style="height:80px;vertical-align:middle" onmouseover="this.style.verticalAlign='bottom'"
onmouseout="this.style.verticalAlign='middle'">
text to align</td>
</tr>
</table>
//例子：
<table>
<tr>
<td style="height:80px;vertical-align:middle" onmouseover="this.style.verticalAlign='bottom'"
onmouseout="this.style.verticalAlign='middle'">
text to align</td>
</tr>
</table>
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
top：和本行位置最高元素对齐。
bottom：和本行位置最低元素对齐。
如果按照字面意思理解vertical-align:middle就应该是文字在元素的垂直位置的最中央，把入前面那个标签中，它的位置应该在一个height为60px的box的中央啊。但是事实上不是这样的。
如果这个vertical-align:middle用来定义一个单元格td，那么它和你想像的一样起作用，看看下面的例子
<table>
<tr>
<td style="height:80px;vertical-align:middle" onmouseover="this.style.verticalAlign='bottom'"
onmouseout="this.style.verticalAlign='middle'">
text to align</td>
</tr>
</table>
//例子：
<table>
<tr>
<td style="height:80px;vertical-align:middle" onmouseover="this.style.verticalAlign='bottom'"
onmouseout="this.style.verticalAlign='middle'">
text to align</td>
</tr>
</table>