Question

I want to make something like a horizontal line with a text in the middle of it. It should look like this (text image follows):

—————————————— TEXT ——————————————–

the line should be dotted and the text in the middle should separate the line in half.

I came up with the idea of using a table with 3 elements with percentage values in width attribute but maybe there is a better solution.

I hope it’s clear. Thanks for ideas

Answer 1

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

And 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;
}

See Example on JSFiddle