Как бы вы разработали HTML-разметку для этого

Question

Я хочу сделать что-то вроде горизонтальной линии с текстом в середине.Это должно выглядеть так (текстовое изображение следует):

------------------------------------------ ТЕКСТ --------------------------------------------

строка должна быть пунктирной, а текст в середине должен разделять строку пополам.

Я пришел с идеей использования таблицыс 3 элементами с процентными значениями в атрибуте width, но, возможно, есть лучшее решение.

Надеюсь, это понятно.Спасибо за идеи

Answer 1

<div id="line"><span>TEXT</span></div>

И CSS:

#line{
    border-bottom: 1px black dotted;
    overflow:visible;
    height:9px;
    text-align:center;
    margin: 5px 0 10px 0;
}
#line span{
    background-color: white;
    text-align:center;
    padding: 0 5px;
}

См. Пример для JSFiddle

Answer 2

Я бы использовал CSS и два контейнера:

Демо: http://jsfiddle.net/LRSuJ/

HTML:

<div class="something">
    <div class="content">Text</div>
</div>

CSS:

.something {
    border-bottom: dotted 1px #000;/* Border style */
    height: 10px;                  /* Adjusted height */
    margin-bottom: 10px;           /* Proper offset for next element */
    line-height: 20px;             /* Actual text height */
    text-align: center;            /* Center text */
}
.content {
    background-color: #FFF;        /* Hide previous dots */
    display: inline;               /* Inline element */
    padding: 0 10px;               /* Customisable left/right whitespace */
}

Answer 3

Я бы сделал это так:

HTML

<fieldset>
    <legend>Text with dotted line</legend>
</fieldset>

CSS

fieldset {
    border: 0;
    border-top: 1px dotted gray;
}
legend {
    text-align: center;
}

jsFiddle demo: http://jsfiddle.net/XZcRB/

Answer 4

Вы можете использовать набор полей и легенду:

<fieldset>
    <legend>TEXT</legend>
</fieldset>

fieldset
{
    border-top:solid 1px black;
}
fieldset legend
{
    text-align:center;
}

http://jsfiddle.net/2amBc/