Мне нужно расположить 3 объекта следующим образом:
Div 1 - контейнер с абсолютным позиционированием, с фиксированной шириной, высотой и положением.
Изображение 1 должно быть изображением с абсолютным позиционированием и только с фиксированным выравниванием по левому краю.
Div 2 должен быть абсолютно позиционированным div, только с фиксированным выравниванием по левому положению.
Мне нужно, чтобы изображения 1 и Div 2 были выровнены с вертикальным центром div 1, поскольку это переменные элементы текста и изображения с динамической высотой.
Пример:
Div 1 имеет фиксированную высоту 200px.
Изображение 1 с переменной высотой 52px
Изображение 1 должно располагаться вертикально:
(200/2) + (52/2) = 126 пикселей
Я изучил ячейку таблицы CSS, вертикальное выравнивание, поле в виде% и другие, но не смог заставить это работать.
Спасибо.
.div1
{
position: absolute;
width: 100px;
height: 100px
top: 100px;
left: 100px;
}
.image1
{
position: absolute;
left: 10px;
// something here to align the image in the vertical middle of div1
}
.div2
{
position: absolute;
left: 60px;
// something here to align the image in the vertical middle of div1
}
<div class="div1"><img class="image1"><div class="div2"></div></div>
Обновленный код:
<head>
<style type="text/css">
.div1 {
background: yellow;
display: table;
position: absolute;
width: 300px;
height: 300px;
top: 100px;
left: 100px;
}
.newdiv {
display: table-cell;
vertical-align: middle;
height: 300px;
}
.image1 {
left: 10px;
position: relative;
width:50px;
height: 80px;
background: blue;
}
.div2 {
position: relative;
background: red;
left: 70px;
width: 100%;
height: 200px;
}
</style>
</head>
<div class="div1"><div class="newdiv"><div class="image1" /></div><div class="div2">123</div></div></div>