Почему этот трюк с вертикальным центрированием не работает?

Question

Почему этот трюк с вертикальным центрированием не работает?

0

Я пытаюсь центрировать три divs вертикально внутри другого div по вертикали. Я пробую описанную здесь технику CSS Tricks и продемонстрировал здесь: добавить псевдоэлемент: перед контейнером:

.author-page-box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

и дать ребенку divs вертикальное выравнивание середины:

.aub-img,
.aub-main,
.aub-contact-links {
  display: inline-block;
  vertical-align: middle;
}

Но моя попытка сделать эту работу не работает! Может ли кто-нибудь сказать мне, где я ошибаюсь? (JSFiddle).

====================

Редактировать:

Вот как выглядит мой макет, а не вертикально по центру!

And Finally 17 янв. 2014, в 18:38

Источник

0

У меня небольшая проблема с определением причины , но ваш элемент before не имеет высоты. Намного легче заметить, когда вы добавляете к нему границу: jsfiddle.net/aCv9e/10
cimmanon 17 янв. 2014, в 17:40
0

Хм, ты прав, кимманон, странный! Когда я добавляю определенную высоту к нему, все центрируется.
And Finally 17 янв. 2014, в 17:46
0

Всякий раз, когда вы используете процентную высоту, вы должны спросить себя «какой процент точно?» В этом случае вы пытаетесь использовать процент поля без установленной высоты, только минимальную высоту. Это не работает в CSS. Поле должно иметь явно установленную высоту контейнера, чтобы использовать процентную высоту
Alohci 17 янв. 2014, в 17:46
0

Ahhhhhh! Спасибо Alochi, это проясняет. Когда я добавляю явную высоту к .author-page-box, он центрируется. Я удивлен, что 100% не учитывают минимальную высоту контейнера.
And Finally 17 янв. 2014, в 17:46
0

@Alohci Да, но родительский элемент имеет высоту, это просто неявное (высота ее дети).
cimmanon 17 янв. 2014, в 17:49
1

@cimmanon - спецификация CSS 2.1 гласит, что для процентной высоты "Если высота содержащего блока не указана явно (т. е. зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как 'auto'. " т.е. если высота родительского элемента «просто неявная», то процент этой высоты не будет работать.
Alohci 17 янв. 2014, в 19:41
0

Спасибо Alohci, это ключ ко всей моей проблеме.
And Finally 18 янв. 2014, в 10:50

Показать ещё 5 комментариев

Теги:

html

css

css3

1 ответ

Ещё вопросы

У меня небольшая проблема с определением причины , но ваш элемент before не имеет высоты. Намного легче заметить, когда вы добавляете к нему границу: jsfiddle.net/aCv9e/10
Хм, ты прав, кимманон, странный! Когда я добавляю определенную высоту к нему, все центрируется.
Всякий раз, когда вы используете процентную высоту, вы должны спросить себя «какой процент точно?» В этом случае вы пытаетесь использовать процент поля без установленной высоты, только минимальную высоту. Это не работает в CSS. Поле должно иметь явно установленную высоту контейнера, чтобы использовать процентную высоту
Ahhhhhh! Спасибо Alochi, это проясняет. Когда я добавляю явную высоту к .author-page-box, он центрируется. Я удивлен, что 100% не учитывают минимальную высоту контейнера.
@Alohci Да, но родительский элемент имеет высоту, это просто неявное (высота ее дети).
@cimmanon - спецификация CSS 2.1 гласит, что для процентной высоты "Если высота содержащего блока не указана явно (т. е. зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как 'auto'. " т.е. если высота родительского элемента «просто неявная», то процент этой высоты не будет работать.
Спасибо Alohci, это ключ ко всей моей проблеме.

CJdriver · Accepted Answer · 2014-01-17T15-32-00.000Z

Что-то вроде этого? Пример с вертикальной ориентацией

У вас была правильная идея, но они добавляли

vertical-align: middle;

к неправильным divs.

Спасибо CJdriver, это, кажется, ответ!