CSS: центрировать группу элементов на одном элементе
Я пишу шаблон для программы Flash Card под названием Anki, которая использует QtWebkit для рендеринга карт.
Я хотел бы расположить группу из трех элементов вертикально по центру среднего элемента. Элементы имеют динамический размер и должны расти в соответствии с их содержимым, но по-прежнему выравниваться по левому краю.
До сих пор я пробовал два подхода: один - центрировать средний элемент, а затем абсолютно позиционировать верхний и нижний элементы внутри этого среднего элемента. К сожалению, это означает, что общая группа элементов не будет расти горизонтально в зависимости от каждого элемента, а будет зависеть только от содержимого среднего элемента. Также общий размер достигает только 50% высоты и ширины страницы.
CSS:
.container {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
.left {
background-color: green;
left: 0;
right: calc(100% / 3 * 2);
}
.left .middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.left .top {
position: absolute;
bottom: 100%;
left: 0;
}
.left .bottom {
position: absolute;
top: 100%;
left: 0;
}
HTML:
<div class="container left">
<div class="middle">
<div class="top"> ödifj asduflsdfsk<br>j dkfj aölkdsjf df sdf sd f</div>
dgs lk lj lkj lku öoiu ökj df sadlfjslk dsfs df s
<div class="bottom">dfffd gfds gdsf f</div>
</div>
</div>
Второй вариант, который я попробовал, был flexbox с justify-content: center; но это означает, что средний элемент не центрирован, а только вся группа элементов.
CSS:
.container {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
.center {
background-color: blue;
left: calc(100% / 3);
right: calc(100% / 3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
HTML:
<div class="container center">
<div class="top"> ödifj asduflsdfsk<br>j dkfj aölkdsjf df sdf sd f</div>
<div class="middle">
dgs lk lj lkj lku öoiu ökj df sadlfjslk dsfs df s
</div>
<div class="bottom">dfffd gfds gdsf f</div>
</div>
Итак, еще раз: 3 элемента, как группа, горизонтально центрированная, но выровненная по левой стороне элементов. Вертикально отцентрировано относительно среднего элемента. И нет фиксированной ширины или высоты. Общая группа должна быть такой же широкой, как самый широкий из элементов.
3 ответа
Вы можете попробовать это:
<div class="col1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
</div>
<div class="col3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
</div>
CSS:
.col1,
.col2,
.col3 {
position:absolute;
top:50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width:33.3333333%;
}
.col1 {
background:green;
left:0;
}
.col2 {
background:red;
left:33.33333333%;
}
.col3 {
background: yellow;
right:0;
}
Вы можете увидеть результат здесь: http://jsfiddle.net/d7pqbkrx/2/
Неважно, я понял это сам. Комбинация нескольких flexbox делает работу:
CSS:
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
}
.flex {
width: auto;
display: flex;
flex-direction: column;
height: 100%;
background-color: green;
align-content: center;
}
.oben {
background-color: red;
flex: 1 1;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.unten {
flex: 1 1;
display: inline;
vertical-align: bottom;
background-color: yellow;
}
.gogo {
background-color: green;
}
HTML:
<div class=container>
<div class=flex>
<div class=oben>dgfgsdfgdfgsfdgd</div>
fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br> glkd jölk jfsahydfsagsgas
<div class="unten"> fjsdlkdfjslkdjf </div>
</div>
В любом случае спасибо за помощь.
Почему бы не попробовать использовать HTML-таблицу? Они отлично подходят для вертикального центрирования с минимальным CSS
<div style="position:absolute; top:0; bottom:0; height:100%">
<table height="100%">
<tbody>
<tr>
<td><!-- anything in here will vertically centre by default --></td>
</tr>
</tbody>
</table>
</div>
нужно будет много поработать, чтобы он выглядел красиво, но это может быть вариант