Question

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

<style>
.imgf{
 width:45px;
}
.textf{
 margin-left:2px;
}
</style>

<img src=http://cdn.flaticon.com/png/256/46951.png class=imgf> <span class=textf>comments(20)</span>

Answer 1

您需要做的就是使用

.imgf {
    width:45px;
    vertical-align: middle; /* add this */
}

Demo

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

Answer 2

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

这样可以解决问题：）

Answer 3

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

img {
    vertical-align: -18px;
}

<强> Fiddle here

Answer 4

下面是一个例子

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

我知道这可能对您的特定情况有点过分，但总的来说这可以帮助您调整任何内容

看看我的例子：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 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对齐图像前的文本

5 个答案: