css中文字图片不在一行上显示

在前端开发中，我们经常会遇到 CSS 中文字和图片不在同一行上显示的情况。这是由于字母高度和图片高度不同导致的。

.box {
  display: flex;
  align-items: center;
}
.box img {
  height: 20px;
  margin-right: 10px;
} 

使用 flex 布局可以轻松让文字和图片在同一行上显示。上面的代码设置了一个容器（.box），并把其中的元素垂直居中（align-items: center）。同时，图片设置了一个固定高度（height: 20px），并设置了右边距（margin-right: 10px）。

如果你不想使用 flex 布局，也可以使用 vertical-align 属性实现文字和图片的对齐。下面是一个示例：

.box {
  line-height: 20px;
}
.box img {
  vertical-align: middle;
  margin-right: 10px;
} 

上面的代码中，父元素（.box）设置了 20 像素的行高（line-height: 20px），而图片使用 vertical-align 属性设置为垂直居中（vertical-align: middle）。同样，图片也设置了右边距（margin-right: 10px）。

最后要提醒的是，在使用 vertical-align 属性时，如果父元素中还有其他元素，则这些元素也需要使用 vertical-align 属性或者 line-height 属性。否则，就会出现垂直对齐不一致的问题。