Добавьте центрированный текст к середине <hr /> -подобной строки

Question

Мне интересно, какие параметры есть в строгом xhtml 1.0 для создания строки по обеим сторонам текста примерно так:

Section one
----------------------- Next section -----------------------
Section two

Я думал о некоторых причудливых вещах, подобных этому:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

Или, наоборот, из-за вышеописанных проблем с выравниванием (как вертикальным, так и горизонтальным):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

Здесь также есть проблемы с выравниванием, которые я решаю с помощью этого беспорядка:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

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

Answer 1

Сетка начальной загрузки:

HTML:

  <div class="row vertical-center">
    <div class="col-xs-5"><hr></div>
    <div class="col-xs-2" style="color: white"> Text</div>
    <div class="col-xs-5"><hr></div>
  </div>

CSS:

.vertical-center{
  display: flex;
  align-items: center;
}

Answer 2

Поднятие 2-летнего поста, но вот как я подхожу к этим ситуациям, используя только один элемент и CSS.

​h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

А вот скрипка, чтобы проверить это: http://jsfiddle.net/sRhBc/ (случайное изображение из Google взято за границу).

Единственным недостатком этого подхода является то, что он не поддерживает IE7.

Answer 3

<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

Злой хак ...

Answer 4

Woohoo мой первый пост, хотя это год. Чтобы избежать проблем с окраской фона в оболочках, вы можете использовать inline-block с hr (никто не сказал этого явно). Выравнивание текста должно центрироваться правильно, так как они являются встроенными элементами.

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

Answer 5

ДЕМО-СТРАНИЦА

HTML

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

Answer 6

Принятие решения @ kajic и размещение стиля в CSS:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

Затем CSS (но это зависит от CSS3 при использовании n-го селектора):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

Приветствие.

(PS В tbody и tr, Chrome, IE и Firefox, по крайней мере, автоматически вставляют tbody и tr, поэтому мой пример, например @ kajic's, не включал их, чтобы сократить время в необходимой разметке HTML . Это решение было протестировано с новейшими версиями IE, Chrome и Firefox (по состоянию на 2013 г.).

Answer 7

Вы можете попробовать сделать fieldset и выровнять элемент "легенды" (текст "вашего следующего раздела") по центру поля, установив только border-top. Я не уверен в том, как легенда расположена в соответствии с элементом fieldset. Я думаю, что это может быть просто margin: 0px auto, чтобы сделать трюк, однако.

пример:

<fieldset>
      <legend>Title</legend>
</fieldset>

Answer 8

Это сработало для меня и не требует цвет фона за текстом, чтобы скрыть границу, вместо этого используется фактический тег hr. Вы можете поиграть с шириной, чтобы получить различные размеры линий часов.

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>

Answer 9

Просто используйте

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

Answer 10

Я использую h1 с пролетом в середине.

HTML Пример:

<h1><span>Test archief</span></h1>

Пример CSS:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

Просто так.