Пример flex box align-items из Mozilla не работает
этот код взят из Mozilla, который должен сделать div в центре, но он делает только центр по горизонтали
.box {
display: flex;
align-items: center;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
background-color:red;
}<div class = "box">
<div></div>
</div>Я пробовал в нескольких разных браузерах, у меня это не работает
потому что документ показывает только соответствующую часть кода ....
Ответы 5
Работает отлично. Увеличьте высоту контейнера, чтобы увидеть эффект:
.box {
display: flex;
align-items: center;
justify-content: center;
height:200px;
}
.box div {
width: 100px;
height: 100px;
background-color:red;
}<div class = "box">
<div></div>
</div>Я знаю, что это работает, когда вы указываете высоту с помощью пикселя, но я хочу 100% или без высоты, как это сделано в примере, который не работает
@Punya осмотрите элемент, и вы увидите. Документы не дают ПОЛНЫЙ код, они дают соответствующий код, они не будут показывать ДОБАВЛЕННУЮ высоту
Добавьте высоту родительского тега (.box). 100%, например
Нет проблем с вашим кодом. Вы должны отдать height на flex-container
.box {
display: flex;
align-items: center;
justify-content: center;
min-height:300px;
background-color:#4a4545;
}
.box div {
width: 100px;
height: 100px;
background-color:#C58B8C;
}<div class = "box">
<div></div>
</div>Причина в том, что вы не указали никаких атрибутов <div>, который находится внутри <div class = "box">.
Пожалуйста, проверьте отправленные мной коды в точности так, как это не сайт Mozilla.
.box {
display: flex;
align-items: center;
justify-content: center;
/* add the lines below */
width: 500px;
height: 300px;
border: 2px dotted rgb(96, 139, 168)
}
.box div {
width: 100px;
height: 100px;
/* add the lines below */
border: 2px solid rgb(96, 139, 168);
border-radius: 5px;
background-color: rgba(96, 139, 168, .2);
}<div class = "box">
<div></div>
</div>Ваш родительский div (.box) должен иметь ширину и высоту, % или пиксели. Попробуйте сначала установить пиксели.
Работает для меня...