вертикальная головная боль

Question

У меня проблемы с вертикальным выравниванием 2 деления внутри 100% высоты.Я гуглил, но не смог решить.

псевдокод:

<div container, fixed height>
  <img, dynamic height/>
  <div inner, 100% height>
    <div><img/></div>
    <div><img/></div>
 </div>
</div>

Два div во внутреннем div, я хочу, чтобы они были в вертикальном центре внутреннего div, но я не могу найтипуть.Невозможно узнать высоту внутреннего div, он просто установлен на 100% из-за случайной высоты изображения над ним.Div внутри внутреннего div также будут иметь динамические высоты.

2 часа возни не дали результатов, так что я иду сюда.

Страница, где вы можете увидеть это в действии: http://pyntmeg.no/?iframe

Answer 1

Вы можете присвоить родительскому DIV.container свойство position: относительное, поскольку оно имеет фиксированную высоту.

Тогда внутренний div может иметь позицию: absolute, и вы установите его высоту равным 100% или, возможно,немного ниже.Вы можете использовать свойство top для его перемещения.

Answer 2

vertical-align предназначен для элементов таблицы, а не для регулярных делений и т. Д. Чтобы получить vertical-align middle для работы, элемент должен быть установлен на display:table-cell, а его родительский элемент должен быть установлен на display:table-row

Будьте осторожны с этим, потому что это действительно меняет способ взаимодействия элемента с его родственными элементами, и это может определенно изменить способ размещения вашей страницы.

Лучшее использованиеэто было бы что-то вроде этого:

<div class="table-row">
    <div class="td">lorem ipsum</div>
    <div class="td">dolor sit amat</div>
</div>

Css:

.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}

ПРИМЕЧАНИЕ

Это не будет работать с элементами, которые плавают слева/ вправо, и это изменит то, как ширина границы влияет на общую ширину элемента.

Я бы использовал это только с табличными данными, так же, как я бы предложил использовать только таблицу.

Answer 3

Пока у div / parent / grandparent есть ширина для работы с ним, вы можете применять 'float: left' к стилю divs внука.

Answer 4

Попробуйте:

.item {
    position: relative;
    top: 10%;
}

Возможно, вам потребуется откорректировать верх: 10%;