Как делать такие заголовки?

Добрый день. Интересует, как сделать такой заголовок, у которого по бокам прорисованы горизонтальные линии. Пример(Рис 1)
4e86952babad458195380385b641a3d1.png
  • Вопрос задан
  • 506 просмотров
Решения вопроса 2
GoooodBoy
@GoooodBoy
На мой взгляд самый простой вариант - через псевдоэлементы (:before :after).
Примерно вот так: codepen.io/GoooodBoy/pen/wKmBKN
Ответ написан
Комментировать
magalex
@magalex
Архитектор распределённых систем управления
Используйте flex. Результат тут.

<div class="container">
  <div class="item"></div>
  <h1>Заголовок</h1>
  <div class="item"></div>
</div>


div.container{
  background-color: #334455;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1{
  flex: content;
  width: auto;
  margin: 0.5em;
}
div.item{
  flex: auto;
  background-color: #112233;
  height: 2px;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Варианты:
1. На background положить картинку или две.
1.1. Контейнер для заголовка с полоской на фоне, а заголовок перекрывает фон и имеет width:auto; и margin:auto;
2. Таблицей 3 столбца две строки, средняя rowspan-2 у левой верхней и правой верхней бордер снизу
Ответ написан
Комментировать
zkid
@zkid
студентик
а что будет происходить с заголовком при уменьшении экрана? Линии остаются или сужаются просто
Ответ написан
Комментировать
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Если уж совсем по правильному, да чтобы оно резиновое было - используйте псевдоэлементы :before, :after и flexbox.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы