Почему не работает vertical-align: middle?
Здравствуйте. Не работает vertical-align: middle;
Вот такая конструкция:
.div < height: 100%; */ width: 16.5%; background: #21477e; border: 1px solid #0561a4; border-radius: 7px; height: 72px; display: flex; vertical-align: middle; >a
Почему-то vertical-align вообще отказывается работать, даже другие свойства, кроме middle. В чем причина?
- Вопрос задан более года назад
- 116 просмотров
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
Почему-то vertical-align вообще отказывается работать, даже другие свойства, кроме middle. В чем причина?
vertical-align для дочерних элементов флексов работать не будет, потому что они блочные.
И работает это свойство не так, как вы предполагаете.
У вас там флекс, значит логично использовать свойства флексов. В вашем случае align-items или align-self.
Решения вопроса 1
Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer
Это свойство для inline элементов. причем применяется оно непосредственно к элементу, а не его родителю (у вас к обоим почему-то).
У вас ссылка имеет стиль display: flex, а значит является блочной.
Можете использовать display: inline-flex, чтобы сделать элемент инлайновым (Хотя это не поможет, так как элемент являтся прямым потомком флекс-контейнера, и всегда будет блочным).
Или, раз уж у вас див является флекс-контейнером, использовать flex-свойства.
Почему не работает vertical-align в блоке?
Помогите разобраться с проблемкой.
В блоке с ссылкой текст не выравнивается по центру.
Вроде и display:inline-block есть, а vertical-align: middle почему то не работает. В последней строке CSS.
https://jsfiddle.net/xSnaip/u1a2kbdo/
- Вопрос задан более трёх лет назад
- 11222 просмотра
Комментировать
Решения вопроса 2
Это широко известный «глюк». Что бы его убрать, нужно поместить в тот же контейнер еще один div 100% высоты. Для наглядности я сделал его яркокрасным. Ширина его значения не имеет, даже если нулевая — это решит ваш вопрос.
И уберите везде position: relative, вы неправильно им пользуетесь.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Виталий @xSnaip Автор вопроса
Благодарю, не знал про «глюк».
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
В большинстве случаев с этим свойством будешь работать в таблицах.
Сделай display: table-cell;
и заработает.
Ответ написан более трёх лет назад
Нравится 1 5 комментариев
Виталий @xSnaip Автор вопроса
Так действительно работает. Только тогда приходится float:right для блока в котом ссылка использовать. Правда хотелось бы узнать все же почему не работает с inline-block. Вроде бы везде написано что с блочными элементами не работает, а со строчными и с inline-block должно работать.
xSnaip: Такова его специфика
Виталий @xSnaip Автор вопроса
Тогда еще вопросик. Может и глупый, но все же. С точки зрения красоты и этичности кода нормально что все перемешано (block, inline-block, table, table-cell) в коде и то что по сути table и table-cell используется не для построения таблицы, а просто из за выравнивая текста ?
Благодарю за помощь.
xSnaip: Как говориться: «На войне все средства хороши». Но в меру, в зависимости от ситуации. Главное — не делайте каркас при помощи таблицы.
Советую приобрести книгу «Большая книга CSS3. Дэвид Макфарланд» — хорошая вещь
Jimmy Exploit @Jimmy_Exploit
table и table-cell используется не для построения таблицы, а просто из за выравнивая текста
да, это какое то безумие. особенно если нужны адаптивные размеры. мне пришлось подтягивать js, для выравнивания текста по вертикали. просто смешно
Не работает vertical-align
Есть родительский div (зеленый на примере-рисунке) и есть два независимых div-блока с текстом и прочими элементами внутри (красный на рисунке). В левом мало текста, а во втором — много. Требуется, чтобы элементы слева всегда были посередине относительно элементов справа, как на рисунке этом:
(источник: joxi.ru) Я знаю, что для этого ворде как нужно использовать vertical-align: middle, но результат не тот, что нужен. Получается идентично как если бы я bottom написал.
Как работает CSS-свойство vertical-align
Свойство vertical-align определяет вертикальное выравнивание содержимого ячейки таблицы или встроенного элемента по отношению к остальной части встроенного потока.
Его можно использовать в двух контекстах:
- Для вертикального расположения строчного элемента внутри содержащей его строки.
- Для вертикального выравнивания внутри таблиц.
vertical-align может принимать значение в процентах или значение длины (length). Если указано значение длины, элемент выравнивается по указанной длине над базовой линией родителя. Значение % выравнивает элемент на указанный процент выше базовой линии родителя. При этом % является ссылкой на высоту строки.
Вот пример использования данного свойства:
.avatar
Также vertical-align поддерживает 8 ключевых слов:
- baseline: значение по умолчанию. Базовая линия элемента выравнивается по базовой линии родителя.
- bottom: нижняя часть элемента выравнивается по всей нижней части строки.
- middle: середина элемента выравнивается по половине x-высоты родительского элемента. X-height — это высота текста без надстрочных и подстрочных символов.
- sub: базовая линия элемента выравнивается по базовой линии нижнего индекса родителя.
- super: базовая линия элемента выравнивается по базовой линии надстрочного индекса родителя.
- text-bottom: нижняя часть элемента равняется по нижней части текста.
- text-top: Верхняя часть элемента равняется по верхней части текста.
- top: верхняя часть элемента выравнивается по верхней части строки.
Примечание: свойство vertical-align работает только со строчными элементами и элементами таблицы; оно не подходит для позиционирования блочных элементов.
Примеры
Чтобы наглядно показать работу этого свойства, мы используем эмоджи ракушки – ��.
vertical-align: baseline
The boy sells seashells �� by the seashore.
vertical-align: bottom
The boy sells seashells �� by the seashore.
vertical-align: middle
The boy sells seashells �� by the seashore.
vertical-align: super
The boy sells seashells �� by the seashore.