首页 > itarticle > css疑难杂症

css疑难杂症

admin 11月 12, 2020 0

垂直居中

单行文字居中

1
2
3

<div style="line-height: 100px">
	<span>文字垂直居中</span>
</div>

table-cell, vertical-align

1
2
3

<div style="height: 300px; display: table-cell; vertical-align: middle;">
	<p>aaa</p>
</div>

多行文字居中

table-cell

<div style="height: 300px; display: table-cell; vertical-align: middle;">
	<p>aaa</p>
	<p>bbb</p>
</div>

单行文字和图片垂直居中 (前提：内部字体相对较小)
line-height, vertical-align
1
2
3
4
<div style="line-height: 500px;">
	<img src="./titles-calc.png" style="/*display: inline-block;*/vertical-align: middle;">
	<span style="vertical-align: middle">aaa</span>
</div>

flex 布局

<div style="height: 500px; display: flex; align-items: center;">
	<img src="./titles-calc.png">
	<span>aaa</span>
</div>