Центрирование всего основного элемента
Я поместил некоторый контент и форму в элемент main. Вот HTML:
<main>
<h1>My main content</h1>
<form action = "/action_page.php" id = "form">
<input type = "email" id = "email" name = "email" placeholder = "Enter your email address"><br><br>
<input type = "submit" value = "Submit">
</form>
</main>
со следующим CSS:
main {
width: 800px;
margin: 0 auto;
}<main>
<h1>My main content</h1>
<form action = "/action_page.php" id = "form">
<input type = "email" id = "email" name = "email" placeholder = "Enter your email address"><br><br>
<input type = "submit" value = "Submit">
</form>
</main>Однако элемент main не центрирован точно. Что может быть причиной?
@Guy, когда я проверяю элемент, я все равно вижу контент чуть левее. мне сделать width: 100vw; ?
Да, потому что вы центрировали контейнер, а не содержимое. Если вы сделаете его шире, контент сдвинется еще левее. Либо а) сделайте контейнер меньше, чтобы содержимое помещалось более плотно, либо б) вместо этого отцентрируйте содержимое с помощью text-align: center, flexbox или чего-то подобного.
text-align: center тоже выравнивает формы? Также использование width: 100vw; вводит горизонтальную полосу прокрутки. Почему это так, ведь 100vw означает 100% ширины области просмотра?
Формы не имеют визуального представления, поэтому этот вопрос не имеет смысла. Вы получаете полосы прокрутки, потому что тело страницы имеет поля.
Лучше не использовать 100vw, за исключением особых случаев, поскольку это означает, что область просмотра исключает пространство для полос прокрутки. Вместо этого используйте 100%.
Ответы 3
Поскольку весь контент занимает 100% ширины main, центрирование объектов будет выглядеть точно так же, как и нецентрирование. Таким образом, вы можете достичь своей цели, указав ширину содержимого вашего main в процентах (я использовал 50%), а затем указав margin-left для main, который будет составлять половину ширины неиспользуемой недвижимости. (Итак, если вы выбрали размер контента в 50 %, то это будет левое поле (100–50) / 2 % = 25 %). Если вместо этого вы выбрали ширину 80 %, то это будет левая граница (100 – 80) / 2 % = 10 %.
main {
width: 800px;
margin-left: 25%;
}
main > * {
width: 50%;
}<main>
<h1>My main content</h1>
<form action = "/action_page.php" id = "form">
<input type = "email" id = "email" name = "email" placeholder = "Enter your email address"><br><br>
<input type = "submit" value = "Submit">
</form>
</main>Конечно, это еще можно улучшить, применяя к вашим элементам дополнительные размеры и другие стили, но я полагаю, это хорошее начало.
Если вы добавите outline: 1px solid #000 к main, вы поймете, почему он не по центру.
main {
width: 800px;
margin: 0 auto;
outline: 1px solid;
}<main>
<h1>My main content</h1>
<form action = "/action_page.php" id = "form">
<input type = "email" id = "email" name = "email" placeholder = "Enter your email address"><br><br>
<input type = "submit" value = "Submit">
</form>
</main>Элемент main занимает 800 пикселей независимо от ширины дочерних элементов, поэтому справа от формы всегда будет много пустого пространства.
Измените width на max-width и добавьте display: inline-block, чтобы main обернулся вокруг самого широкого дочернего элемента, но вместо этого вы получите другую проблему.
main {
display: inline-block;
max-width: 800px;
margin: 0 auto;
outline: 1px solid;
}<main>
<h1>My main content</h1>
<form action = "/action_page.php" id = "form">
<input type = "email" id = "email" name = "email" placeholder = "Enter your email address"><br><br>
<input type = "submit" value = "Submit">
</form>
</main>Элемент больше не центрируется, потому что вы можете центрировать его только с помощью margin: auto на блочных элементах. Поэтому вместо этого добавьте div.container вокруг ширины основного элемента, максимальную ширину и центрируйте ее.
main {
display: flex;
justify-content: center;
}
.center-container {
display: inline;
max-width: 800px;
outline: 1px solid; /* ONLY FOR SHOWING THE SIZE OF THE CONTAINER */
}<main>
<div class = "center-container">
<h1>My main content</h1>
<form action = "/action_page.php" id = "form">
<input type = "email" id = "email" name = "email" placeholder = "Enter your email address"><br><br>
<input type = "submit" value = "Submit">
</form>
</div>
</main>Просто уменьшите width до ширины form (содержимого main). Проверить это можно в инспекторе. И измените width на max-width, чтобы сделать его отзывчивым.
main {
max-width: 235px; /* it was just width*/
margin: 0 auto;
}<main>
<h1>My main content</h1>
<form action = "/action_page.php" id = "form">
<input type = "email" id = "email" name = "email" placeholder = "Enter your email address"><br><br>
<input type = "submit" value = "Submit">
</form>
</main>
Он отлично центрируется во фрагменте (нажмите «Вся страница» и просмотрите его в окне шириной более 800 пикселей.) Что вы подразумеваете под «не точно центрировать»? Чего вы ожидали?