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

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

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>
1716
задан 29 янв. '09 в 0:01
источник поделиться
20 ответов

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

<!-- 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>
1934
ответ дан 29 янв. '09 в 0:10
источник

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

Однострочное выравнивание по вертикали: среднее

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

<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

Чтобы это правильно работало по всем направлениям, вам придется немного взломать 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)

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

position: relative;
top: 50%;
transform: translateY(-50%);
321
ответ дан 29 янв. '09 в 0:45
источник

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

div {display:flex;}


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

Метод 1:

div {align-items:center;}

DEMO


Метод 2:

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

DEMO


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

81
ответ дан 24 марта '14 в 10:54
источник

Вы должны применить 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). Который может быть достаточно хорош, но может немного выглядеть, если в тексте есть восходящие линии или ограничители, расположенные сверху или снизу:

centered icon comparison

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

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

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

69
ответ дан 11 сент. '14 в 15:58
источник

Техника, используемая в принятом ответе, работает только для однострочного текста (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 */
}
50
ответ дан 25 дек. '13 в 0:06
источник

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

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>
23
ответ дан 02 июля '12 в 17:41
источник

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

17
ответ дан 29 янв. '09 в 0:05
источник

В принципе, вам нужно будет перейти к CSS3.

-moz-box-align: center;
-webkit-box-align: center;
10
ответ дан 29 нояб. '11 в 21:24
источник

Для записи "команды" выравнивания не должны работать в SPAN, поскольку это тег в строке, а не тег на уровне блока. Такие вещи, как выравнивание, маржа, отступы и т.д., Не будут работать над встроенным тегом, потому что точка встроенного текста не должна прерывать поток текста.

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

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

(Понимание основных принципов CSS - это ключ к тому, что это не слишком раздражает)

9
ответ дан 18 нояб. '11 в 16:24
источник

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

Это серьезно самый простой способ.

9
ответ дан 12 янв. '12 в 17:52
источник

Используйте line-height:30px для диапазона, чтобы текст совпадал с изображением:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>
8
ответ дан 21 мая '13 в 2:50
источник

Я еще не видел решения с margin в любом из этих ответов, так что вот мое решение этой проблемы.

Это решение работает только в том случае, если вы знаете ширину вашего изображения.

HTML-код

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}
5
ответ дан 10 апр. '16 в 14:26
источник

Введите эти свойства span

span{
    display:inline-block;
    vertical-align:middle;
}

Используйте display:inline-block; Если вы используете свойство vertical-align. Это ассоциированные свойства

3
ответ дан 08 нояб. '16 в 9:26
источник
background:url(../images/red_bullet.jpg) left 3px no-repeat;

Я обычно использую 3px вместо top. Увеличивая/уменьшая это значение, изображение можно изменить на требуемую высоту.

3
ответ дан 13 апр. '12 в 10:21
источник

На одной из кнопок в jQuery mobile, например, вы можете немного ее настроить, применив этот стиль к изображению:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}
2
ответ дан 24 окт. '12 в 18:22
источник

Вы можете установить изображение как inline element с помощью свойства display

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>
2
ответ дан 30 янв. '17 в 17:54
источник

Это может сбить с толку, согласен. Попробуйте использовать функции таблицы. Я использую этот простой трюк CSS для позиционирования модалов в центре веб-страницы. Он имеет большую поддержку браузера:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

и часть CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Обратите внимание, что вам нужно стилизовать и настроить размер контейнера изображений и таблиц, чтобы он работал по вашему желанию. Наслаждайтесь.

1
ответ дан 06 июля '17 в 5:12
источник

Многострочное решение:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Работает во всех browers и ie9 +

1
ответ дан 24 февр. '14 в 17:20
источник

Во-первых, встроенный CSS не рекомендуется вообще, это действительно испортит ваш HTML.

Для выравнивания изображения и диапазона вы можете просто выполнить vertical-align:middle.

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
0
ответ дан 25 мая '17 в 15:47
источник

Вероятно, вы хотите:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Как и другие, попробуйте vertical-align на изображении:

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

CSS не раздражает. Вы просто не читаете документацию.; Р

-4
ответ дан 29 янв. '09 в 0:10
источник

Другие вопросы по меткам или Задайте вопрос