CSS выровнять текст перед изображением

Question

У меня есть изображение и текст перед ним. проблема в том, что я не могу выровнять текст и изображение, текст всегда находится внизу, и я хочу, чтобы он был посередине изображения.

вот проблема: http://jsfiddle.net/3gvezL9t/1/

<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 */
}

демонстрация

Причина, по которой вы получаете эту проблему, заключается в том, что по умолчанию изображения выровнены по базовой линии, поэтому необходимо расположить их вертикально по центру, который мы используем. vertical-align свойство со значением middle

Answer 2

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

Это бы сработало:)

Answer 3

img нижняя часть элемента будет расположена на одной линии с базовой линией текста. Таким образом, вы можете изменить img"s vertical-align как это:

img {
    vertical-align: -18px;
}

Скрипка здесь

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;
}