Как вертикально выровнять div с абсолютным положением друг на друга?

У меня есть два divs, которые мне нужно размещать прямо друг над другом, внутри другого div. Простой, я использую z-index и даю им положение: абсолютное. Но содержимое каждого из этих divs должно быть выровнено по вертикали. Когда я размещаю их сверху, они не центрируются по вертикали.Как вертикально выровнять div с абсолютным положением друг на друга?

Есть ли способ смешать оба эти стиля, чтобы сделать это?

Или это возможно с jQuery каким-то образом?

Это в основном то, что у меня есть.

<div style="width:100%"> 
    <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:0; position:absolute;"><img></div> 
    <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:1; position:absolute;"><img></div> 
</div>

У меня есть высота и ширина, таблица-ячейка и вертикальная выровняемость как средняя. Это центрирует контент, пока я не добавлю абсолютную позицию, которая мне нужна для работы z-индекса.

Любые идеи? Спасибо,

источник

2012-05-22 IamFace

У вас есть что-то против 'position: relative'? –

изображения будут размером 400x400 или переменные размеры? –

Изображения всегда будут иметь размер переменной, в зависимости от того, что загружено пользователем. Но два изображения должны пересекаться друг с другом, а чаще всего они будут немного меньше внутри области просмотра (в div они содержатся, то есть заданный размер) – IamFace

Вы можете добавить дополнительный-DIV внутри второй: http://jsfiddle.net/MDJDx/

<div style="width:100%"> 
    <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; z-index:0; position:relative;top:0;">img</div> 
    <div style="height:400px; width:400px; z-index:1; position:absolute; top:0"> 
    <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; position:relative;">img</div> 
    </div> 
</div>

источник

2012-05-22 22:03:56 AvL

Это лучший вариант, и, кажется, это единственный способ чтобы он работал с встроенной графикой IamFace

Добавить

margin: auto;

в DIV с содержанием вы хотели бы центрирования. Для этого вы также должны установить ширину в этом div.

Может

width: 100%;

должен сделать трюк.

источник

2012-05-22 21:39:12

Стиль два внутренних дивы с

position: relative; top: 0px;

в дополнение к тому, что у вас уже есть

источник

2012-05-22 21:41:03

Два divs затем складываются друг под друга, а не сверху:/ – IamFace

О, моя ошибка, я думал, это то, что вы намеревались. Сожалею! Так вы хотите, чтобы они буквально перекрывали друг друга? Один полностью покрывает другой? –

Да, они на самом деле svg-файлы с большим количеством прозрачности, которые используются для создания эффекта. – IamFace

дают ваши внутренние дивы line-height:400px;

http://jsfiddle.net/2DXPg/1/

источник

2012-05-22 21:57:12

Это, похоже, точно что я хочу. Похоже, что в теге «выравнивание по вертикали, выравнивание по тексту и высота строки» необходимы для этого? Мои изображения будут встроены в IamFace

По какой-то причине это, похоже, не работает с встроенными :/ – IamFace

Как вертикально выровнять div с абсолютным положением друг на друга?

ответ

Смежные вопросы