Выравнивание по центру блока html: Как выровнять слой по центру веб-страницы?

html — Выравнивание элементов внутри блока по центру, но что бы последний был слева

Вопрос задан 2 года 1 месяц назад

Изменён 2 года 1 месяц назад

Просмотрен 402 раза

У меня есть контейнер, внутри которого находятся несколько элементов, для выравнивания использую:

display: flex;

Входные данные:

1. Есть контейнер, внутри которого находится 5 элементов (может быть любое другое значение). Размер контейнера не фиксирован, изменяется в зависимости от изменения ширины экрана.
2. Расстояние между элементами в контейнере должно быть всегда одинаково и равняться 20px.
3. Элементы должны располагаться по центру контейнера.
4. Последние элементы должны располагаться слева. Например, если есть 4 элемента, где 3 на первой строке, а один на второй, то последний элемент должен располагаться ровно под первым.

Я пробовал:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  border: 2px solid black;
}
.inner {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #AB012D;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

В этом примере элементы расположены не по центру, а смещены влево, мне это не подходит.

Я пробовал добавить:

justify-content: center;

но тогда последние элементы располагаются по центру.

Мне нужно чтобы они смещались как можно левее, т.е. первый элемент в последней строчке расположен ровно под самым первым элементом.

Так же можно использовать:

justify-content: space-between;

но тогда расстояние между элементами изменяется, чего нельзя допустить.

Как решить такую проблему?

Необязательно использовать именно flex, можно любые другие технологии, главное чтобы это работало во всех более менее современных браузерах.

• html
• css
• выравнивание

C Flex можно, но достаточно заморочно. Если не требуется поддержка старых браузеров то удобнее будет воспользоваться CSS Grid Layout:

.container {
  display: grid;
  grid-template-columns: min-content min-content;
  justify-content: center; 
  width: 400px;
  border: 2px solid black;
}
.inner {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #AB012D;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Отдельно стоит отметить что в Grid margin’ы не схлопываются, поэтому что бы получить 20px суммарного расстояния нужно ставить 10px, или же воспользоваться свойством grid-gap.

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

HTML, CSS / Выравнивание нижнего края элемента по центру окна браузера · GitHub

HTML, CSS / Выравнивание нижнего края элемента по центру окна браузера

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

	HTML
	<div>
	<div> </div>
	</div>
	CSS
	.wrap {
	background-color: green;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* Растягиваем элемент на весь экран. */
	vertical-align: middle;
	text-align: center;
	}
	.wrap:before {
	content: «»;
	display: inline-block;
	height: 100%;
	width: 0px;
	vertical-align: middle;
	}
	.content {
	width: 200px;
	height: 150px;
	background-color: red;
	display: inline-block;
	}

Центрирование вещей без устаревшего тега

Я знаю, о чем вы думаете: «Привет, Лиланд, звонили из конца 90-х, хотят вернуть идею поста в блоге».

Hardy har, но есть причина, по которой я поднимаю этот вопрос сейчас. Как я обнаружил на форумах поддержки WordPress.org, люди по-прежнему используют тег

 изображение {
дисплей: блок;
поле слева: авто;
поле справа: авто;
} 

 div {
выравнивание текста: по центру;
} 

 div.centerText {
    выравнивание текста: по центру;
} 

 div.centerDiv {
    ширина: 60%;
    поле: 0px авто 0px авто;
} 

 img.center {
    дисплей: блок;
    поле слева: авто;
    поле справа: авто;
} 

 .vCenter {
    минимальная высота: 50 пикселей;
    отображение: таблица-ячейка;
    вертикальное выравнивание: посередине;
}