Как сделать цвет фона для h1 в пределах текста, что бы заголовок был по центру страницы?

Question

[eashla]

Добрый день!
Если к заголовку применить:

h1 {
background:green;
display:inline;
}

То заголовок смещается влево... Нужно разместить по центру
text-align: center; не помогает

Вижу выход в виде:

<h1 class=...><span class=...>заголовок по центру с фоном</span></h1>

Но есть споры по отношению влияния на SEO

Подскажите ваш вариант решения. Спасибо!

Answer 1

[Ankhena]

<h1><span>...</span></h1>

<div><h1>...</h1></div>

Comments

[eashla]

<span><h1></h1></span>
Подойдёт ? Проверил - работает, но с точки зрения красоты по seo ?

[Ankhena]

eashla: С точки зрения красоты - первый.
С точки зрения seo - я бы выбрала второй.
Либо обсудила бы с дизайнером другие идеи украшения заголовка.

Можно на js выяснить какую ширину занимает именно текст и потом подложить градиент нужного размера, если речь именно о цветной подложке. В html будет только h1 - красиво. Но целесообразность сомнительна.

[eashla]

Ankhena W: <span><h1></h1></span>
Подойдёт ? Проверил - работает, но с точки зрения красоты по seo ?

Забыл обернуть в code

[Ankhena]

eashla: По современным стандартам можно и в span, но выглядит непривычно.

Хороший вариант есть ниже про позиционирование и трансформ, но там надо аккуратно следить за окружающим контентом.

Answer 2

[Полина Емельянова]

Забирайте на здоровье И ЗАБУДТЕ ПРО ДЕКОР ОБЕРТКИ КАК ПРО КОШМАР!!!!!!!!!!!!!!!

Comments

[Ankhena]

Это отличное решение, но есть минус:
если контент добавляет клиент и за заголовком может быть что угодно, например, просто текст вообще без тегов.

[Полина Емельянова]

Ankhena W: Дык повесьте стили на класс, я так и делаю, как правило.

[Ankhena]

Полина Емельянова: на чей класс? codepen.io/anon/pen/VbYyMW

[Полина Емельянова]

Ankhena W: Простите, я немного запуталась: вы задаете "бездомный" текст/элемент и удивляетесь, что оно не работает или работает, но не так??
codepen.io/emelyanova/pen/eWmWEW - я например, делаю так, обычно.

[Ankhena]

Полина Емельянова: Я? Я - нет. И не удивляюсь.

Я написала, что клиент в контентное поле может ввести все, что угодно. И при этом нет гарантии, что он обернет это хоть в какой-то тег. Или пусть даже это будет нормальный тег, но им окажется img
codepen.io/anon/pen/wdBYXB

Поэтому, Ваш вариант прекрасен и я полностью за него, вообще не люблю лишние теги и обертки, но он подходит только если есть полный контроль над окружающими тегами.

[eashla]

Применил div обёртку

Answer 3

[Senbonzakuraa]

как вариант

<h1 class="head"><span class="txt">заголовок по центру с фоном</span></h1>

.head {
  text-align: center;
}
.txt {
  background: green;
}

Comments

[eashla]

в вопросе этот вариант был рассмотрен - интересовали альтернативные

Answer 4

[Андрей Токмаков]

А в чем проблема указать text-align: center родителю заголовка? Зачем оборачивать лишним блоком, если он и так скорее всего лежит в каком то контейнере?

Comments

[eashla]

родителя нет

[Андрей Токмаков]

eashla: Как так нет? У Вас заголовок сразу в боди вложен что ли?
Даже если так, то боди не родитель по Вашему????