CSS: Как центрировать снэк-бар горизонтально?

Question

Я использую простой код закусочной от w3schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar). Он работает нормально, но для длинных сообщений он начинает двигаться, например, за горизонтальный центр.

<div id="snackbar">Some very very very very very very long text some message..</div>

Я пытаюсь исправить это, убрав «margin-left», а также «left», и только настройки "margin: 0 auto" но это не работает.

Answer 1

В этом примере снэк-бар позиционируется фиксированным на 50% и позиционируется с отрицательным полем в 125px - и это проблема. Эти 125px - это так называемое «магическое число», то есть число, которое работает только в особых обстоятельствах. В этом случае это работает только для специальной ширины закусочной. Это терпит неудачу в любой другой ширине. Плохой! ;)

Было бы лучше позиционировать (как это делается в примере) на 50%, но затем (кроме примера) переместить его на половину его собственной ширины. Вы можете сделать это с помощью

transform: translateX(-50%);

Эти 50% относятся к ширине самой закусочной.

РЕДАКТИРОВАТЬ: Wooops, Lazar Deli c было намного быстрее! :)

Answer 2

Удалите margin-left: -125px; и добавьте: transform: translateX(-50%); из селектора #snackbar.

Answer 3

Я поместил закусочную в гибкий контейнер, чтобы поместить его в центр. Вы можете узнать больше о макете flexbox из этой статьи: Полное руководство по Flexbox | CSS -Трюки .

.snackbar-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.snackbar {
  max-width: 100%;
  padding: 15px;
  background: #333;
  color: white;
  font-family: sans-serif;
}

<div class="snackbar-root">
  <div class="snackbar">Here goes short message</div>
  <div class="snackbar">Here goes some loooooooooooooooooooooooooooooooooooong messsssssssssssssssssssage</div>
</div>