Вертикально выровнять текст рядом с изображением?

Question

Почему не vertical-align: middle не работает? И все же, vertical-align: top работает .

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

Answer 1

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

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Проверено в FF3.

Теперь вы можете использовать flexbox для этого типа макета.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Answer 2

Вот несколько простых техник для выравнивания по вертикали:

Вертикальное выравнивание по одной линии: середина

Это просто: установите высоту строки текстового элемента равной высоте контейнера

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Вертикальное выравнивание по нескольким строкам: низ

Абсолютно поместите внутренний div относительно его контейнера

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Вертикальное выравнивание нескольких строк: по центру

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Если вы должны поддерживать древние версии IE <= 7 </h2> Чтобы это работало корректно по всем направлениям, вам придется немного взломать CSS. К счастью, есть ошибка IE, которая работает в нашу пользу. Установив top:50% на контейнере и top:-50% на внутреннем div, вы можете достичь того же результата. Мы можем объединить их, используя другую функцию, которую IE не поддерживает: расширенные селекторы CSS. <style type="text/css"> #container { width: 30px; height: 60px; position: relative; } #wrapper > #container { display: table; position: static; } #container div { position: absolute; top: 50%; } #container div div { position: relative; top: -50%; } #container > div { display: table-cell; vertical-align: middle; position: static; } </style> <div id="wrapper"> <div id="container"> <div><div><p>Works in everything!</p></div></div> </div> </div> Переменная высота контейнера по вертикали: посередине

Для этого решения требуется чуть более современный браузер, чем в других решениях, поскольку в нем используется свойство transform: translateY. (http://caniuse.com/#feat=transforms2d)

Применение следующих 3 строк CSS к элементу будет центрировать его по вертикали в пределах его родительского элемента независимо от высоты родительского элемента:

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 3

Измените div на гибкий контейнер:

div {display:flex;}

Теперь есть два способа центрировать выравнивания для всего содержимого:

Метод 1:

div {align-items:center;}

DEMO

---

Метод 2:

div * {margin-top:auto; margin-bottom:auto;}

DEMO

---

Попробуйте разные значения ширины и высоты в img и разные значения размера шрифта в span, и вы увидите, что они всегда остаются в середине контейнера.

Answer 4

Вы должны применить vertical-align: middle к обоим элементам, чтобы он был идеально отцентрирован.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

Принятый ответ делает значок по центру около половины высоты x текста рядом с ним (как определено в CSS-спецификациях ). Что может быть достаточно хорошим, но может выглядеть немного не так, если текст имеет восходящие или спусковые элементы, выделяющиеся сверху или снизу:

Слева текст не выровнен, справа - как показано выше. Демонстрацию в реальном времени можно найти в этой статье о вертикальном выравнивании .

Кто-нибудь говорил о том, почему vertical-align: top работает в сценарии? Изображение в вопросе, вероятно, выше текста и, таким образом, определяет верхний край линейного блока. vertical-align: top на элементе span, затем просто поместите его в верхнюю часть линейного блока.

Основное различие в поведении между vertical-align: middle и top заключается в том, что первые перемещают элементы относительно базовой линии бокса (который размещается там, где необходимо для выполнения всех вертикальных выравниваний и, таким образом, он выглядит скорее непредсказуемым ) и второй относительно внешних границ линейного блока (который более ощутим).

Answer 5

Техника, использованная в принятом ответе, работает только для однострочного текста ( demo ), но не для многострочного текста ( demo ) - как отмечено там.

Если кому-то нужно вертикально расположить многострочный текст по изображению, вот несколько способов (Методы 1 и 2, вдохновленные этой статьей CSS-Tricks )

Метод № 1: таблицы CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Метод № 2: Псевдоэлемент на контейнере ( FIDDLE ) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Метод № 3: Flexbox ( FIDDLE ) ( caniuse )

CSS (Приведенная выше скрипка содержит префиксы поставщиков):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

Answer 6

Этот код работает как в IE, так и в FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

Answer 7

Потому что вы должны установить line-height на высоту div, чтобы это сработало

Answer 8

По сути, вам придется перейти к CSS3.

-moz-box-align: center;
-webkit-box-align: center;

Answer 9

Для записи «команды» выравнивания не должны работать в SPAN, потому что это тег in-line , а не тег block-level . Такие вещи, как выравнивание, поля, отступы и т. Д., Не будут работать с встроенным тегом, поскольку точка вставки не должна нарушать поток текста.

CSS разделяет теги HTML на две группы: встроенные и на уровне блоков. Ищите "css block vs inline", и появляется отличная статья ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Понимание основных принципов CSS является ключом к тому, чтобы не быть таким уж раздражающим)

Answer 10

Еще одна вещь, которую вы можете сделать, это установить текст line-height в размер изображения в пределах <div>. Затем установите изображения на vertical-align: middle;

Это действительно самый простой способ.