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

StackOverflow https://stackoverflow.com/questions/489340

  •  20-08-2019
  •  | 
  •  

Вопрос

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

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Это было полезно?

Решение

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

<!-- 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>

Другие советы

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

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

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

<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)

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

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

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

div {display:flex;}


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

Способ 1:

div {align-items:center;}

ДЕМОНСТРАЦИЯ

Способ 2:

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

ДЕМОНСТРАЦИЯ

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

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

Техника, используемая в принятом ответе, работает только для однострочного текста (ДЕМОНСТРАЦИЯ), но не многострочный текст (ДЕМОНСТРАЦИЯ) - как отмечено там.

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

Способ №1:Таблицы CSS (СКРИПКА) (IE8+ (каниузе))

CSS - файл:

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

Способ №2:Псевдоэлемент в контейнере (СКРИПКА) (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:Гибкий блок (СКРИПКА) (каниузе)

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

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

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

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

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

В принципе, вам придется перейти к CSS3.

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

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

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

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

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

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

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

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

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

Не видел решения с 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;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

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

Запишите эти свойства span

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

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

Вы можете установить изображение как 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>

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

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

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

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

Работает во всех браузерах и ie9 +

Это может сбить с толку, я согласен.Попробуйте использовать функции таблицы.Я использую этот простой 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; }

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

Во- первых встроенный 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>

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

<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 не раздражает.Ты просто не читаешь документация.;P

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top