一、使用line-height属性
使用line-height属性可以将文本垂直居中，方法如下：
<div class="container">
<img src="img.jpg" alt="image">
<p class="text">Lorem ipsum dolor sit amet</p>
</div>
.container {
display: flex;
align-items: center;
}
.text {
line-height: 100px; /*根据图片高度设置*/
}
这里的line-height值需要根据图片的高度进行设置，可以通过计算得出，但是这种方法只适用于单行文本。如果是多行文本，则需要将line-height设置为normal，同时利用flex属性实现多行文本的垂直居中。
二、使用vertical-align属性
在HTML中，图片默认是基于文本的基线对齐的。因此，可以通过设置文本的vertical-align属性来垂直对齐图片。方法如下：
<div class="container">
<img src="img.jpg" alt="image">
<p class="text">Lorem ipsum dolor sit amet</p>
</div>
.container {
display: flex;
align-items: center;
}
img {
vertical-align: middle;
}
.text {
display: inline-block;
vertical-align: middle;
}
这里将文本设为inline-block元素，然后通过vertical-align属性将图片和文本都设置为middle, 实现垂直对齐。
三、使用transform属性
还有一种方法是使用CSS的transform属性，方法如下：
<div class="container">
<img src="img.jpg" alt="image">
<p class="text">Lorem ipsum dolor sit amet</p>
</div>
.container {
display: flex;
align-items: center;
}
img {
transform: translateY(-50%);
}
.text {
margin: 0;
}
这里利用了transform: translateY(-50%)将图片向上移动了50%的高度，然后将文本的margin设为0，实现垂直对齐。
四、使用table和table-cell属性
最后一种方法是使用CSS的table和table-cell属性，方法如下：
<div class="container">
<div class="cell">
<img src="img.jpg" alt="image">
</div>
<div class="cell">
<p class="text">Lorem ipsum dolor sit amet</p>
</div>
</div>
.container {
display: table;
}
.cell {
display: table-cell;
vertical-align: middle;
}
这里将父元素设为table元素，子元素设为table-cell元素，然后通过vertical-align属性将图片和文本都设置为middle, 实现垂直对齐。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236167.html
微信扫一扫 
支付宝扫一扫 