Как выровнять span?

Question

[Талян]

Вот чудо

- и я не понимаю, там же нет ни одной строчки, указывающей отступ слева. Почему span съезжает в правую сторону? Чёрная магия?

Answer 1

[DivineDraft]

.footer span {
      color:white;
      position:absolute;
      top:50%;      
left:0;
right:0;
      text-align: center;   
  }

Answer 2

[WhatIsHTML]

UPD2: Не о том подумал. https://jsfiddle.net/zq8465rb/10/
Я бы сделал выравнивание флексом. Задаем футеру свойство флекс и ровняем дочерний эелемент по центру. Если так уж хочется именно через позиционирование, то надо понимать, что position: absolute выбивает эелемент с нормального потока и text-align: center уже не действует на него. Ровнять элементы с position absolute очень просто

.footer {
      margin-top: 50px;
      width:100%;
      height: 150px;
      background-color: #1587a2;
      text-align: center;
      position:relative;
      
  }
  
  .footer span {
      color:white;
      position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  }

Comments

[Талян]

Это у меня в css первые строки. В JSfiddle не работает. вот

[WhatIsHTML]

Анатолий Цивилёв, обновил ответ

Answer 3

[TheRevan]

Вот объяснение причины.. Чтобы такого небыло, нужно задать ширину элементу и margin-left: -50% от ширины

Answer 4

[Александр]

Нужно просто обнулить стандартные стили браузера:

body, html {
  margin: 0;
  padding: 0;
}

Comments

[Талян]

нет. Выше все уже разжевано.