Стилизовать заголовок как на картинке

@FreeZon · Регистрация: 30.12.2013

Author24 — интернет-сервис помощи студентам

Поомогите сделать такой заголовок.
Ну или просто див. Я начал вот. но как сделать полоску так, я не знаю.

HTML5

<div class="mheader">
                    <span class="text">
                        Заголовок
                    </span>
                </div>

CSS

.mheader{
    display: block;
    width: 100%;
    text-align: center;
}

@4cfg · 31.05.2017, 15:49

В 2 словах, делаем 2 блока и делаем (пример обводку по верху блока)
Для регулирование высоты делаем размер блока и длину

HTML5

<div>
</div>
<span>Текст</span>
<div>
</div>

CSS

div{
    width: 50px; // длина линии
    height: 3px; // положение линии
    border-top: 2px solid #000; // Линия по топ блока 
    display: inline-block; 
}

@FreeZon · 31.05.2017, 17:07 **[ТС]**

Сообщение от 4cfg

display: inline-block;

Забыл что есть такой параметр как inline... спасибо.

Добавлено через 57 минут
но все же это не то

@Mailo · 31.05.2017, 17:14

Если смысл в том, что линия тянется на весь блок и необходим текст различной длинны, который будет перекрывать линию, то делаем в два блока: один это линия, второй это сам текст с белым фоном, ну и к примеру с левым и правым падингом по 4px что бы с линией не срастался текст.

Если смысл сделать текст + 2 линии фиксированных размеров то делаем один блок, и добаляем 2 абсолютно спозиционированные линии через 2 псевдокласса.

@Akellorio · 03.06.2017, 11:01

HTML5

1	<span>Text</span>

CSS

span:before{
  content:"";
  display:inline-block;
  width:200px;
  height: 2px;
  background-color:#000000;
  vertical-align:middle;
}
 
span:after{
  content:"";
  display:inline-block;
  width:200px;
  height: 2px;
  background-color:#000000;
  vertical-align:middle;
}

Добавлено через 3 минуты
Если нужна заданная высота то вместо

CSS

1	vertical-align:middle;

используйте margin-bottom: высоту линии в пикселях.

Новые блоги и статьи
Как в цикле for перебрать все элементы в словаре в Python bytestream 24.01.2025 Словари в Python представляют собой мощные структуры данных, которые позволяют хранить информацию в формате ключ-значение. Эта особенность делает их незаменимыми при работе с данными, где требуется. . .	Как отменить rebase в Git hw_wired 24.01.2025 Git rebase представляет собой мощный инструмент для управления историей коммитов в системе контроля версий Git. Этот механизм позволяет разработчикам изменять последовательность, комбинировать или. . .	Как поменять цвет input placeholder с помощью CSS bytestream 24.01.2025 В веб-разработке оформление элементов пользовательского интерфейса играет ключевую роль в создании привлекательного и интуитивно понятного дизайна. Особое внимание уделяется формам ввода данных, где. . .	Как перебрать все значения в перечислении (enum) в C# bytestream 24.01.2025 Перечисление (enum) в языке программирования C# представляет собой специальный тип данных, который позволяет определить набор именованных констант. Этот мощный инструмент особенно полезен, когда. . .	Как обойтись без проверки на null, чтобы избежать NullPointerException в Java bytestream 24.01.2025 NullPointerException (NPE) является одним из самых распространенных исключений в Java, создающих серьезные проблемы при разработке программного обеспечения. Данное исключение возникает при попытке. . .	Что лучше использовать в href ссылок в JavaScript: "#" или "javascript:void(0)" bytestream 24.01.2025 При разработке веб-приложений важную роль играет правильное использование HTML-ссылок в сочетании с JavaScript. Одним из ключевых аспектов является выбор корректного значения атрибута href для. . .
Как узнать индекс элемента списка по его значению в Python hw_wired 24.01.2025 При работе с коллекциями данных в Python часто возникает необходимость не только манипулировать элементами списка, но и определять их точное местоположение. Индекс элемента представляет собой. . .	Как удалить коммит из ветки (branch) в Git hw_wired 24.01.2025 Система контроля версий Git является мощным инструментом для отслеживания изменений в коде и совместной работы над проектами. Она предоставляет разработчикам гибкость и возможность экспериментировать. . .	Чем Docker отличается от виртульной машины hw_wired 24.01.2025 В мире информационных технологий виртуализация стала неотъемлемой частью разработки и развертывания программного обеспечения. Этот подход позволяет создавать изолированные среды для запуска. . .	Как перейти с jQuery на Angular/AngularJS bytestream 24.01.2025 jQuery долгое время занимала позицию незаменимого инструмента, существенно упрощающего работу с DOM-элементами и асинхронными запросами. Эта библиотека произвела настоящую революцию в том, как. . .	Зачем добавляется while (1); в JSON. Безопасность JSON и его уязвимости bytestream 24.01.2025 JavaScript Object Notation (JSON) стал стандартом де-факто для обмена данными между клиентом и сервером. Этот легковесный формат данных обеспечивает удобное представление структурированной информации. . .	Как отметить чекбокс (установить checked) с помощью jQuery bytestream 24.01.2025 jQuery представляет собой мощную JavaScript-библиотеку, которая значительно упрощает манипуляции с элементами веб-страницы, включая работу с формами и их компонентами. Особое место в веб-разработке. . .

@FreeZon 8 / 10 / 8 Регистрация: 30.12.2013 Сообщений: 577
	31.05.2017, 17:07 [ТС]	3
	Сообщение от 4cfg display: inline-block; Забыл что есть такой параметр как inline... спасибо. Добавлено через 57 минут но все же это не то 0

@Mailo 247 / 224 / 31 Регистрация: 18.02.2010 Сообщений: 2,294
	31.05.2017, 17:14	4
	Если смысл в том, что линия тянется на весь блок и необходим текст различной длинны, который будет перекрывать линию, то делаем в два блока: один это линия, второй это сам текст с белым фоном, ну и к примеру с левым и правым падингом по 4px что бы с линией не срастался текст. Если смысл сделать текст + 2 линии фиксированных размеров то делаем один блок, и добаляем 2 абсолютно спозиционированные линии через 2 псевдокласса. 0

	03.06.2017, 11:01

Опции темы