Заставить некоторую маржу-вершину одному из 2 элементов встроенного блока

Question

У меня есть следующий код, который в основном изображение с текстом справа, все в одной строке. Я хотел бы, чтобы текст был отцентрирован вертикально по отношению к изображению:

|
|
img   myText here
|
|

Вот мой код

img, .info {
  display: inline-block;
}

<img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>

Я попытался применить какое-то поле к классу информации, но он также перемещает img. Как мне это сделать?

Спасибо

Answer 1

Как уже упоминалось, используйте вертикальное выравнивание, чтобы центрировать элементы по вертикали. Кроме того, вы должны сделать их встроенными блоками, чтобы добавить отступ:

img, .info {
  display: inline-block;
  vertical-align:middle;
}

.info {
    padding-left:32px;
}

<img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>

Answer 2

Попробуйте вертикальный метод выравнивания по центру

 .holder img{
 vertical-align:middle;
 }

<div class="holder">
<img src="http://placehold.it/100x150">
    <span class="info">
      <span>FOO</span>
      <span>BLAH</span>
    </span>

  </div>

Answer 3

Поместите их в обертку, затем выровняйте по вертикали: https://jsfiddle.net/g7mk4cp0/

HTML:

<div class="wrapper">
  <img src="http://placehold.it/100x150">
  <span class="info">
    <span>FOO</span>
    <span>BLAH</span>
  </span>
</div>

CSS:

.wrapper > img, .wrapper > span {
  vertical-align: middle;
}

Answer 4

Просто используйте vertical-align:middle

Элемент находится в середине родительского элемента

img, .info {
  display: inline-block;
  vertical-align:middle;
}

<img src="http://placehold.it/100x150">
<span class="info">
  <span>FOO</span>
  <span>BLAH</span>
</span>