C блочно-строчными элементами вы уже знакомились в курсе про блочную модель документа. Напомним, что это элементы, у которых свойство display имеет значение inline-block .
Блочно-строчные элементы ведут себя двояко. Снаружи они выглядят как обычные строчные, но внутри они ведут себя как блочные.
От строчных им достались следующие черты:
- по ширине они ужимаются под своё содержимое;
- могут располагаться в одну строку;
- реагируют на вертикальное выравнивание, vertical-align ;
- реагируют на горизонтальное выравнивание, text-align , заданное у родителя.
- им можно задавать размеры с помощью width и height ;
- а также внешние и внутренние отступы и рамки, которые работают во всех направлениях и увеличивают размер элемента.
vertical-align: middle не помог.
- Вопрос задан более трёх лет назад
- 4534 просмотра
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
evg_: >У вас сейчас все правильно.
Вот только центральный блок находится ниже середины внешнего блока.
>Малоизвестный глюк работы с inline блоками и vertical-align
Это не глюк, всё по спецификации. Вот тут объясняют:
css-live.ru/articles/ikf-vertikalnoe-vyravnivanie-.
Но неужели нет просто способа центрировать inline-block по центру. Не верю.
Обратить внимание на стили для ссылки.
Если шрифт не нулевой то может блок чуть съезжать вверх-вниз. Ссылка изначально имеет вывод в inline формате, поэтому некорректно отрабатывает высоту. Надо ставить inline-block
Как вариант запомню, спс.
>Если шрифт не нулевой то может блок чуть съезжать вверх-вниз.
Почему так происходит?
.a — это просто класс, не ссылка
.
DTX: Привиделось что в коде ссылка, раз нет, тогда про инлайн блок можно не учитывать)
По шрифту. Я не разбирался в этом досконально с документацией. Но как мне видится. Line-height и размер шрифта работает по принципу (дальше грубый пример): из высоты линии вычитаем высоту шрифта и получаем расстояние между строк. Далее добавляем его до или после строки. Из за этого расстояния добавочного/вычтенного как раз блок и съезжает.
evg_: Отнюдь, это свойство играет роль. Изначально выравнивание ставится по базовой линии. А не по центру. Поэтому блок по центру ну ни как не будет.
У него был пример я бы не сказал что рабочий, так как он имел сдвиг по вертикали.
А способ решения задачи уже можно оставить на усмотрение ТС 🙂
Можно еще и абсолютно позиционировать блоки по центру, можно и флексами — у каждого способа есть свои области применения. Как допустим у флексов с кроссбраузерностью. Ведь мягко говоря — ни очень хорошо. А иногда может потребоваться и поддержка старых браузеров.
Да вы и сами в курсе.
Алексей: Да уже вспомнил что дефолтное выравнивание по базовой линии. Но все равно это извращение какое то с этими inline-block, vertical align. Ну никак ни для это они созданы.
Для этих вещей есть намного лучшее решение — использовать флексы.
На счет кроссбраузерности. Во всех браузерах превосходная поддержка (Если конечно IE не считать за браузер). caniuse.com/#feat=flexbox Но и для этого убожества можно использовать условные комменты.
В общем самым адекватным решением будет использование flexbox. остальное порнография. имхо
На счет абсолютного позиционирования))) можно и на таблицах сверстать.) Тут то и пригодится vertical-align.
Проблема заключается в том что, не понятно как работает свойство vertical-align.
Как можно увидеть блоки идут в ряд как и требуется от display:inline-block; Но нужно же как-то задать выравнивание этих блоков: выровнять по верху, по низу, по середине. И тут нам должно помочь свойство vertical-align, т.к свойство display:inline-block; дает нам природу inline объектов. Но не тут то и было проблема заключается в том что если блок и является inline-block то если внутри будет какой-то текст то выравнивание будет равняться по этому тексту, а не по блоку.
Объясните мне как работает vertical-align при inline-block.
Как игнорировать содержимое (текст) внутри inline-block элемента?
