29
2019
09

CSS vertical-align 属性

定义和用法

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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。