Как использовать вертикальное выравнивание с высотой строки?

Question

Как использовать вертикальное выравнивание с высотой строки?

0

У меня есть элементы из div, которые выходят из их контейнера, потому что я использую line-height. Но единственный способ, которым я нашел работу с vertical-align - использовать line-height.

Может ли кто-нибудь объяснить мне, почему у меня такое поведение и как его исправить?

Также есть ли у кого-нибудь советы или рекомендации по использованию vertical-align?

Вот код:

#resources {
    background-color: green;
    width: 100%;
    height: 64px;
}

.resourceContainer {
    float: left;
    text-align: center;
    vertical-align: middle;
    line-height: 64px;
    width: 33.3%;
}

Пример (Не платите за намерение пути к изображениям)

Elfayer 20 апр. 2014, в 20:19

Источник

Теги:

html

css

1 ответ

Ещё вопросы

King King · Accepted Answer · 2014-04-20T15-57-00.000Z

Вам просто нужно сбросить line-height для внутреннего div (потому что line-height наследуется):

.resourceContainer > div {
  display:inline-block;
  line-height:100%;
  vertical-align:middle;     
}

демонстрация

ПРИМЕЧАНИЕ. vertical-align применяется к самому элементу не к дочерним элементам. Поэтому вам не нужно устанавливать vertical-align:middle для .resourceContainer, вместо этого установите его для прямого внутреннего div.

Хорошо, контент не выходит, но контент resourceContainer не центрирован по вертикали.