图片和文字垂直居中

<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>

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

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

p {
  display: inline-block;
}

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

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

解决方法有两种：

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

Chris Coyier 提供了一种使用 Grid 布局技巧来使图片和文字垂直居中的方法：How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?。