css在图像前对齐文本

Question

我在它前面有一个图像和一个文本。问题是，我无法对齐文本和图像，文本总是在底部，我希望它在图像的中间前面。

这是问题所在：

    .imgf{
     width:45px;
    }
    .textf{
     margin-left:2px;
    }

<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png class=imgf> <span class=textf>comments(20)</span>

Answer 1

您需要做的就是添加

vertical-align: middle;

.imgf 的样式

vertical-align: middle;

.imgf {
  width:45px;
  vertical-align: middle;
}
.textf {
  margin-left:2px;
}

您遇到此问题的原因是因为默认情况下，图像与基线对齐，因此为了将其垂直对齐到中心，我们使用vertical-align值为 的属性middle。