Почему этот код, с дисплеем Flex, оправданным центром и центром Align-Eitem не выравнивает элементы в центр горизонтальн ⇐ CSS

[Anonymous]

Я изучаю JS и одну из задач, которые я выполняю, - это кодировать простой JS, HTML и CSS -ориентированный код, чтобы помочь мне изучить JS и иметь возможность создавать определенные веб -элементы и проекты JS, чтобы, когда я чувствую, что я хорошо понимаю JS, я могу применить их к более крупным проектам в будущем.

Код: Выделить всё

display: flex;
align-items: center;
/* AND */
justify-content: center;
< /code>
в «тело» в моем файле CSS. Разве это не должно создавать отображение элементов автоматически в центре, вертикально и горизонтально? У меня нет никаких других правил CSS, которые могли бы с этим связываться. Я не думаю в любом случае. < /P>
Однако, если я проверю элемент и перейду к самой верхней строке кода - код HTML:

< /code>

, а затем (в пределах Expect Element) добавьте следующее в element  element.style < /strong>

height: 100%;< /code>

, а также добавить его в тег тела, который я объявил в моем файле CSS.

height: 100%;

poof, он работает. Он сосредотачивает элементы в центр страницы вертикально. Это уже центрирован по горизонтали. Просто не вертикально, пока не добавлю этот код. Но я не думаю, что мне нужно добавить высоту 100% к

element.style< /code>

Так что я делаю именно здесь? Я использую VSCODE, а затем предварительно просмотр HTML -файла с расширением LifeServer. Я изучаю Flexbox - потому что я только недавно начал серьезно относиться к кодированию с надеждой на работу (после обучения онлайн). < /P>
Вот мой код, извините за долгий пост. Просто невероятно смущен.body {
background-color: #dbdbdb;
display: flex;
align-items: center;
justify-content: center;
}

.arrows {
height: 70px;
}

/* .left-arrow {
display: flex;
align-items: center;
justify-content: center; */
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
}

.top {
display: flex;
align-items: center;
gap: 50px;
}< /code>











< /code>
< /div>
< /div>
< /p>
В файле slider.js нет кода. Я еще не получил так далеко. Честно говоря, я не уверен, что происходит, я избавился от некоторых HTML -элементов, а также от некоторых элементов CSS.


Подробнее здесь: https://stackoverflow.com/questions/769 ... item-cente