图片和文字垂直居中

<div class="container">
  <img src="https://images.pexels.com/photos/918281/pexels-photo-918281.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" height="260" />
  <p>lorem</p>
</div>

vertical-align 属性经常用于表单或图片和文字垂直对齐，middle 可以将元素放置在父元素的中部。

.container img {
  display: inline-block;
  vertical-align: middle;
}

.container p {
  display: inline-block;
}

image.png

vertical-align 属性各个值的所对应的基线：

vertical-align 属性

扩展：vertical-align 属性还可用于解决图片底部默认空白缝隙问题，原因是行内块元素会和文字的基线对齐。

解决方法有两种：

• 将图片转为块级元素 display: block;
• 给图片添加 vertical-align: middle | top | bottom