Создание заголовка между двумя строками

Это, наверное, простой вопрос, но:

Как я могу сделать заголовок, используя любой тег заголовка, но я хочу, чтобы заголовок был между такими строками:

HTML:

<h4>Staging Server</h4>

Иллюстрация:

образец


html css html-heading
person Alex    schedule 06.01.2015    source источник
comment
возможный дубликат Добавить строку рядом с заголовком с помощью CSS   -  person Denise Skidmore    schedule 07.01.2015

Ответы (4)


arrow_upward
1
arrow_downward

Вы можете использовать :after и :before: псевдоэлементы.

h4 span {
  position: relative;
  color: #00C8FF;
  padding: 0 15px;
  margin: 0 80px;
  font-size: 16px;
  font-weight: 100;
}
h4 span:before, h4 span:after {
  content: '';
  position: absolute;
  width: 60%;
  height: 1px;
  transform: translateY(-50%);
  top: 50%;
  background: #6F6F6F;
  left: -60%;
}
h4 span:after {
  left: 100%;
}
<h4><span>Staging Server</span></h4>

person Weafs.py    schedule 06.01.2015
comment
@Alex - Добро пожаловать. :) - person Weafs.py; 07.01.2015

arrow_upward
1
arrow_downward

Буквально первый результат в гугле...

body
{
  background-color: black;
  color: white;
}
.subtitle {
  margin: 0 0 2em 0;
}
.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}
<p class="subtitle fancy"><span>A fancy subtitle</span></p>

Взято из здесь.

person Shahar    schedule 06.01.2015

arrow_upward
1
arrow_downward 

<fieldset style="border:none; border-top: 1px solid #999;">
    <legend style="text-align:center;"> Staging Server </legend>
</fieldset>

http://jsfiddle.net/3qcpjgxw/

person ceadreak    schedule 06.01.2015
comment
Кроме того, легенда может быть полностью оформлена так... просто, элегантно +1, плюс это контейнер для всего, что у вас будет дальше. - person fnostro; 07.01.2015
comment
Группа полей и легенда предназначены не для использования в качестве обычных заголовков содержимого, а для идентификации элементов управления формы. Вы теряете SEO-преимущество тегов заголовков и делаете код запутанным. Может даже запутать программы чтения с экрана, но я не знаю. Это просто неправильное использование элементов fieldgroup/legend IMO. ОП специально просил использовать любой тег заголовка. Я бы не рекомендовал это для названия. - person Radley Sustaire; 07.01.2015
comment
да и нет, у вас обычно нет заголовка без последующего контента, который в этом случае, вероятно, является статистикой на промежуточном сервере, который должен, по всей вероятности, быть рядом полей и меток. Для меня, работающего с ASP.NET, обычно существует только одна форма. Но множество элементов управления, которые необходимо организовать и разделить, и для меня fieldset/legend — отличный инструмент для этого. - person fnostro; 07.01.2015

arrow_upward
0
arrow_downward

Простой пример может быть таким:

<hr><h4>Staging Server</h4><hr>

И небольшая настройка CSS:

hr, h4 {
  display:inline-block;
}

hr {
  width:30%;
}
person Damjan Pavlica    schedule 06.01.2015