Это, вероятно, простым вопросом, но:Сделав еще капельку между двумя линиями
Как я могу сделать заголовок, используя любую headling тег, но я хочу титул между линиями так:
HTML:
<h4>Staging Server</h4>
Иллюстрация:
Вы можете использовать :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>@ Алекс - Добро пожаловать. :) –
Буквально первый результат на Google ...
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>Взятые из here.
<fieldset style="border:none; border-top: 1px solid #999;">
<legend style="text-align:center;"> Staging Server </legend>
</fieldset>
Также легенда может быть полностью стильной, так что ... простой, элегантный +1 плюс контейнер для всех, что у вас есть. – fnostro
Полевая группа и легенда не предназначены для использования в качестве обычных заголовков контента, но для идентификации элементов управления форма. Вы теряете преимущество SEO в тегах заголовков и, что делает код запутанным. Могут даже запутать читатели экрана, но я не знаю. Это просто неправильное использование элементов group/group/IMO. OP специально попросил «использовать любой тег заголовка». Я бы не рекомендовал это для названия. –
Да и нет, у вас обычно нет заголовка без последующего содержимого, которое в данном случае является вероятным статистическим показателем на «промежуточном сервере», который * должен *, по всей вероятности, быть рядом полей и меток. Для меня, работая с ASP.NET, обычно существует только одна форма. Но целый ряд элементов управления, которые должны быть организованы и разделены, и, для меня, fieldset/legend - отличный инструмент для этого. – fnostro
Простой пример может выглядеть так:
<hr><h4>Staging Server</h4><hr>
и немного CSS твик:
hr, h4 {
display:inline-block;
}
hr {
width:30%;
}
Возможный дубликат [Добавить строку рядом с заголовком с CSS] (http://stackoverflow.com/questions/20198769/add-a-line-next-to-a-header-with-css) –