定义和用法
vertical-align 属性设置元素的垂直对齐方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
w3c有一段相关信息如下：
'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
Inherited: no
Percentages: refer to the 'line-height' of the element itself
Media: visual
Computed value: for <percentage> and <length> the absolute length, otherwise as specified
可以看到vertical-align影响inline-level元素和table-cell元素垂直方向上的布局。根据MDN描述，vertical-align对::first-letter和::first-line同样适用。
适用于：
inline水平的元素
inline:<img>,<span>,<strong>,<em>,未知元素
inline-block:<input>(IE8+),<button><IE8+>....
'table-cell'元素
table-cell:<td>
所以默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性。
取值：
vertical-align: baseline|length|percentage|sub|super|top|middle|bottom|text-top|text-bottom|initial|inherit;
举例：两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid darkgreen;
display: inline-block;
}
.tt{
border: 1px solid darkblue;
vertical-align: top;
}
</style>
</head>
<body>
<div>
</div>
<div class="tt">为什么？</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid darkgreen;
display: inline-block;
}
.tt{
border: 1px solid darkblue;
/*vertical-align: top;*/
}
</style>
</head>
<body>
<div>
</div>
<div class="tt">为什么？</div>
</body>
</html>
解决方案就是给第二个div加上：vertical-align:top。
关于vertical-align和基线我知道一点，但是这个问题我没能答出，所以学习总结分享一下。
原文链接：https://www.qiquanji.com/post/8683.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知