vertical-align 的特点
- 定义 行内元素 的基线相对于该元素所在行的基线的垂直对齐。
- 当被指定为负长度值和百分比值，会使元素降低而不是升高。
- 在 表单元格 中，这个属性会设置单元格框中的单元格内容的对齐方式。
- JavaScript 语法：
object.style.verticalAlign="bottom"
| 值 | 描述 |
|---|---|
| length | 通过指定的长度来提高或降低一个元素。可使用负值。 |
| % | 通过 “line-height” 属性的百分比来提高或降低一个元素。可使用负值。 |
| baseline | 默认。把元素的基线与父元素的基线对齐。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标。 |
| top | 把元素的顶端与行中最高元素的顶端对齐。 |
| text-top | 把元素的顶端与父元素字体的顶端对齐。 |
| middle | 把元素放置在父元素的中部。 |
| bottom | 把元素的底端与行中最低元素的底端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
demo 使用 vertical-align 将图片与文字底部对齐
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
p{
border: 1px solid black;
/*display: flex;
align-items: flex-end;*/
}
b{
border: 1px solid black;
font-size: 30px;
color: red;
padding: 0 5px;
vertical-align: bottom;
}
img{
/* bottom：将元素的底端与行中最低的元素的底端对齐*/
/* text-bottom：将元素的底端与父元素字体的底端对齐*/
vertical-align: bottom; /* 图片与行中最低的元素的底端对齐*/
width:50px;
border:1px solid black;
}
</style>
</head>
<body>
<div>
<p style="border-bottom: 1px solid black;">
test<b>reality</b>paragragh
<img src="img/small08.jpg" />
</p>
</div>
</body>
</html>
demo vertical-align 使其行内的文字之间基线对齐
<style>
...
b{
border: 1px solid black;
font-size: 30px;
color: red;
padding: 0 5px;
/* baseline (默认),把元素的基线与父元素的基线对齐。*/
vertical-align: baseline; /* bottom 改为 baseline*/
}
img{
vertical-align: baseline; /* 图片的底部与文字基线对齐，而不是底部*/
width:50px;
border:1px solid black;
}
...
</style>
demo vertical-align 图片与文字居中对齐
<style>
...
img{
vertical-align: middle; /* bottom 改为 middle*/
width:50px;
border:1px solid black;
}
...
</style>
vertical-align 属性失效
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
p{
border: 1px solid black;
/* 设置了 display: flex; 属性之后，vertical-align，text-align 属性都会失效*/
display: flex;
/* 如果依然要其中的元素底部对齐，可以使用*/
/*align-items: flex-end;*/
}
b{
border: 1px solid black;
font-size: 30px;
color: red;
padding: 0 5px;
vertical-align: baseline; /* bottom 改为 baseline*/
}
img{
vertical-align: middle;
width:50px;
border:1px solid black;
}
</style>
</head>
<body>
<div>
<p style="border-bottom: 1px solid black;">
test<b>reality</b>paragragh
<img src="img/small08.jpg" />
</p>
</div>
</body>
</html>
Reference
怎么应用vertical-align，才能生效？
vertical-align和text-align区别
Style verticalAlign 属性
利用vertical-align:middle垂直居中
CSS vertical-align 属性