css在图像前对齐文本 [英] css align text in front of image

问题描述

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

I have an image and a text in front of it. the problem is, I cant align text and image, text is always in the bottom and I want it in the middle-front of image.

问题来了:

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

推荐答案

您只需添加

vertical-align: middle;

到.imgf的样式

.imgf {
  width:45px;
  vertical-align: middle;
}
.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>

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

The reason you are getting this issue is because by default, images are aligned to the baseline, so inorder to vertically align it to the center we use vertical-align property with a value of middle.

这篇关于css在图像前对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！