Почему я не могу выровнять таким способом несколько элементов?

Question

[Ivanushka255]

При этом left: 50% работает так как надо - сдвигает элемент на половину своего "родителя". С transform: translate(-50%) проблемы. По какой-то причине это свойство возвращает элемент на его начальное положение.

Comments

[Вадим]

1) что значит "Выровнять"?
2) стоит почитать как работают свойства, которыми собиаетесь пользоваться. Я про translate.

[Ankhena]

По какой-то причине это свойство возвращает элемент на его начальное положение.

По причине того, что вы ему так сказали.

parent, как блочный элемент занимает всю ширину своего родителя.
Вы сказали left 50% - ок, блок подвинулся на 50% ширины родителя.
Потом, что его нужно сдвинуть обратно на половину своей ширины.
Но раз ширина одинаковая, то он встал туда где был.

А куда он, по-вашему, должен был попасть?

[Ivanushka255]

Ankhena, понял, спасибо

[Ankhena]

Ivanushka255, если вы хотите поставить элементы в горизонтальный центр, используйте flex и justify-content: center
Или text-align если дети инлайн/инлайн-блоки.

[Ivanushka255]

Ankhena, извините, туплю. Можно еще такой вопрос? Почему вот тут, даже несмотря на то, что элемент располагается как бы на всю ширину окна браузера, его можно выровнять? В то время как в моем первом примере - нельзя (только если задать display: inline-block)? Дело в количестве элементов?

[Ankhena]

Ivanushka255, width 400 это вовсе не "элемент располагается как бы на всю ширину окна браузера"

И речь была не про ширину браузера, а про ширину родителя.

[Ivanushka255]

Ankhena, а все! В первом примере же не указывалась четко ширина элемента, поэтому 100%

Answer 1

[syntaxorange]

Вы позиционируете родительский контейнер, который растянут на всю ширину страницы. Разумется после сдвигов с одинковыми величинами он возвращается на своё исходное положение. Задайте родителю тоже блочно-строчный бокс, чтобы его ширина зависела от размера потомков.

Answer 2

[ilya granovskyy]

display :inline-block;