Как выровнять inline-block вертикально по центру?

Question

[DTX]

codepen.io/anon/pen/wWykkG

vertical-align: middle не помог.

Answer 1

[gleendo]

Первый вариант. Указать у блока родителя line-height равный height. В том случае если высота в абсолютных единицах. Вроде как с относительной высотой такое не прокатит.
Второй вариант. намного оптимальнее. Использовать flexbox.
У внешнего блока родителя указать:

display: flex;
align-items: center;

Comments

[DTX]

line-height и так указан
.a {
background: #bbb;
height: 4rem;
line-height: 4rem;
}

[DTX]

Менять rem'ы на px пробовал - не помогло. Чем же flex оптимальная? Не люблю использовать его для каждой мелочи. Плюс, хочется с инлайнами разобраться

[gleendo]

DTX: Менять rem не нужно. Вроде как только с процентами не пройдет центрирование.
У вас сейчас все правильно.
B суть здесь вообще не в Inline-block. Выравнивайте либо через line-height = height, либо с помощью flexbox;
А flexbox как раз для таких вот мелочей и будет самым лучшим вариантом.

Ну а если хочется по извращаться то, можно еще использовать не inline-block а просто inline.
B и плюс добавить еще:
.b::after {
content: "";
width: 1px;
background: transparent;
display: inline-block;
height: 100%;
vertical-align: middle;
}

Малоизвестный глюк работы с inline блоками и vertical-align

[DTX]

evg_: >У вас сейчас все правильно.
Вот только центральный блок находится ниже середины внешнего блока.

>Малоизвестный глюк работы с inline блоками и vertical-align
Это не глюк, всё по спецификации. Вот тут объясняют:
css-live.ru/articles/ikf-vertikalnoe-vyravnivanie-...

Но неужели нет просто способа центрировать inline-block по центру. Не верю.

[gleendo]

DTX: Легкий способ это указать line-height равный height. Также настолько же легко и просто, использовать flexbox. Намного сложнее использовать третий вариант представленный мною.
А vertical-align тут вообще не при чем.
В общем не извращайтесь. Vertical-align для выравнивания текста, именно текста нужен а не для выравнивания inline блоков.

[DTX]

evg_: >Легкий способ это указать line-height равный height. Также настолько же легко и просто, использовать flexbox.
Эти способы дают разные результаты
codepen.io/anon/pen/RRrNOX

Answer 2

[Алексей]

Обратить внимание на стили для ссылки.
Если шрифт не нулевой то может блок чуть съезжать вверх-вниз. Ссылка изначально имеет вывод в inline формате, поэтому некорректно отрабатывает высоту. Надо ставить inline-block

.a {
  background: #bbb;
  height: 4rem;
  line-height: 4rem;
  font-size:0;
  display:inline-block;
}

.b {
  background: #888;
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.5rem;
  vertical-align: middle;
}

Comments

[DTX]

Как вариант запомню, спс.

>Если шрифт не нулевой то может блок чуть съезжать вверх-вниз.
Почему так происходит?

.a - это просто класс, не ссылка
.

[Алексей]

DTX: Привиделось что в коде ссылка, раз нет, тогда про инлайн блок можно не учитывать)

По шрифту. Я не разбирался в этом досконально с документацией. Но как мне видится. Line-height и размер шрифта работает по принципу (дальше грубый пример): из высоты линии вычитаем высоту шрифта и получаем расстояние между строк. Далее добавляем его до или после строки. Из за этого расстояния добавочного/вычтенного как раз блок и съезжает.

[Алексей]

evg_: Не понял ваш посыл. Понятно что будет по центру из-за line-height равным height. Так вроде ТС этого и хотел... Или я не догоняю.

[gleendo]

Алексей: Посыл в том, что ТС сам не знает что хочет. У него и так в приведенном им примере рабочий вариант. Я предоставил еще 2 полностью рабочих варианта, не знаю что еще нужно.
А на счет вашего кода, я имел ввиду что vertical-align лишняя строка и это свойство особой роли в центрировании по вертикали не играет. Просто указать line-height = height и все.

[Алексей]

evg_: Отнюдь, это свойство играет роль. Изначально выравнивание ставится по базовой линии. А не по центру. Поэтому блок по центру ну ни как не будет.

У него был пример я бы не сказал что рабочий, так как он имел сдвиг по вертикали.
А способ решения задачи уже можно оставить на усмотрение ТС :)
Можно еще и абсолютно позиционировать блоки по центру, можно и флексами - у каждого способа есть свои области применения. Как допустим у флексов с кроссбраузерностью. Ведь мягко говоря - ни очень хорошо. А иногда может потребоваться и поддержка старых браузеров.

Да вы и сами в курсе.

[gleendo]

Алексей: Да уже вспомнил что дефолтное выравнивание по базовой линии. Но все равно это извращение какое то с этими inline-block, vertical align. Ну никак ни для это они созданы.
Для этих вещей есть намного лучшее решение - использовать флексы.
На счет кроссбраузерности. Во всех браузерах превосходная поддержка (Если конечно IE не считать за браузер). caniuse.com/#feat=flexbox Но и для этого убожества можно использовать условные комменты.
В общем самым адекватным решением будет использование flexbox. остальное порнография. имхо

На счет абсолютного позиционирования))) можно и на таблицах сверстать.) Тут то и пригодится vertical-align.

[Алексей]

evg_: Ну на таблицах тоже все еще ведется верстка, допустим e-mail рассылки. Так что, пока не убедили в необходимости везде использовать flexbox :)

[DTX]

evg_: >У него и так в приведенном им примере рабочий вариант
Да нерабочий же. Сверху расстояние больше.

Answer 3

[Андрей]

у вас же высота известна чего вы паритесь https://jsfiddle.net/svistiboshka/1odbk3L6/
а вообще вот пару ссылок и все встанет на свои места:
https://css-tricks.com/centering-css-complete-guide/
web-standards.ru/articles/vertical-align

либо просто

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

Answer 4

[iBird Rose]

родителю дать before с такими параметрами:

:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 100px; //высота блока родителя
	margin-left: -1px;
	vertical-align: middle;
}