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

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

这样就可以了:)

Answer 2

您只需添加

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.

Answer 3

举个例子

我会把图片放在一个容器中，使容器位置相对，而所有内容都是绝对位置，这样你就可以自由定位了。

我知道这对于您的具体情况可能有点过头了，但总的来说这会帮助您对齐任何内容

看看我的例子：http://codepen.io/anon/pen/LEwQdB

<style>
div{
  width:200px;
  height:200px;
  position:relative;
  background-color:green;
}
div img{
  background-color:red;
  width:180px;
  height:180px;
  position:absolute;
  display:block;
  left:50%;
  margin-left:-90px;
  margin-top:-90px;
  top:50%;
}
div span{
  position:absolute;
  background-color:white;
  width:100%;
  text-align:center;
  color:black;
  top:50%;
  margin-top:-10px;
}
</style>
<div>
  <img src="#"/>
  <span>title</span>
</div>

Answer 4

img 元素的底部将与文本的基线位于同一行。因此，您可以像这样更改 img 的 vertical-align：

img {
    vertical-align: -18px;
}

Fiddle here

Answer 5

在html中代码如下：

<div id="imag">
  you text here
 </div>

css代码如下：

#imag
{
  background-image:imagepath/image_name.jpg;
  height:200px;
  width:200px;
  text-align:center;
}

css 在图像前面对齐文本

css align text in front of image

html

css

vertical-alignment