CSS vertical-align
CSS vertical-align属性用于定义嵌入式或表格单元格框的垂直对齐。它是CSS的不言自明的特性之一。对于初学者来说,这不是一件容易的事情。
vertical-align做什么?
它应用于内联或内联块元素。
它影响元素的对齐方式,而不影响其内容。 (表格单元格除外)
应用于表格单元格时,它会影响单元格的内容,而不是单元格本身。
CSS垂直对齐值
值 |
说明 |
baseline |
它将元素的基线与父元素的基线对齐,这是默认值。 |
length |
用于将元素的长度增加或减少指定的长度,也可以使用负值。 |
% |
它用于按" line-height"属性的百分比增加或减少元素,允许使用负值。 |
sub |
它将元素对齐,就好像它是下标一样。 |
super |
它将元素对齐,就好像它是上标一样。 |
top |
它将元素的顶部与该行上最高的元素的顶部对齐。 |
bottom |
它将元素的底部与行中的最低元素对齐。 |
text-top |
元素的顶部与父元素的字体的顶部对齐。 |
middle |
该元素位于父元素的中间。 |
text-bottom |
元素的底部与父元素的字体的底部对齐。 |
initial |
它将此属性设置为其默认值。 |
inherit |
从其父元素继承此属性。 |
CSS垂直对齐示例
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="good-morning.jpg" alt="Good Morning Friends"/> 这是默认对齐方式的图像。</p>
<p><img src="good-morning.jpg" class="top" alt="Good Morning Friends"/> 这是顶部对齐方式的图像。</p>
<p><img src="good-morning.jpg" class="bottom" alt="Good Morning Friends"/> 这是文本底部对齐的图像。</p>
</body>
</html>
输出:
这是默认对齐方式的图像。
这是顶部对齐方式的图像。
这是底部对齐的图像。