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


Почему vertical-align: middleРабота? И все еще, vertical-align: top делает Работа.

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

1661


источник


Ответы:


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

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


1873



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

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

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

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

316



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

div {display:flex;}


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

Способ 1:

div {align-items:center;}

DEMO


Способ 2:

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

DEMO


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


77



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


66



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

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

Метод №1: таблицы CSS ( FIDDLE ) (IE8 + ( могу ли я использовать ))

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 ) ( могу ли я использовать )

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

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

46



This code works in IE as well as FF:

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

22



Because you have to set the line-height to the height of the div for this to work


17



Basically, you'll have to get down to CSS3.

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

9



For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-line tag, not a block-level tag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.

CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...

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

(Understanding core CSS principles is a key to it not being quite so annoying)


8