Выравнивание по вертикали одного div внутри другого не работает

#html #css

#HTML #css

Вопрос:

Это сокращенная версия моего кода: http://jsfiddle.net/f6GCz /

Я пытаюсь центрировать поле «подробнее» по вертикали, используя этот код:

    position: absolute;
   margin-left: auto;
   margin-right: auto;

Что может привести к тому, что это поле не будет центрировано по вертикали? Даже когда я применяю к нему ширину, это не работает. Предпочтительны кроссбраузерные решения (IE8 )!

Ответ №1:

Если вам нужно использовать абсолютное позиционирование, добавьте это в css-поле «подробнее»:

 left:50%;
width:90px;
margin-left:-45px;

Где левое поле всегда равно 1/2 ширины контейнера.

Обновить

Если вам не нужно использовать absolute, то задайте div ширину и установите значение margin равным:

 margin:0 auto;

При желании ширина может быть в процентах вместо px значения.

Обновлена скрипка с обоими результатами.

Обновление два

Если вы хотите выровнять свой блок «Подробнее», не указывая его как абсолютный, поместите его в контейнер нижнего колонтитула, расположенный внизу, затем используйте margin:0 auto на нем. Что-то вроде этого: скрипка 2

1. Что делать, если мне не нужно использовать absolute?

2. Действительно жаль, что это боль, но просто для ясности. При новом подходе поле «Подробнее» не находится внизу и vertical-align: bottom не работает: jsfiddle.net/32PwC/3

3. Это правильно, margin:auto не будет работать с абсолютно расположенным div, и вы не можете расположить div, bottom:0 если у вас нет абсолютно позиционированного div. Компромиссом может быть наличие контейнера нижнего колонтитула, а затем вашего поля «Подробнее» в нем. Что-то вроде этого: jsfiddle.net/8S5Ys