Line in the middle of the text

Question

How to create a line in the middle of the text, the line must occupy the entire length of the div? Like this, the parentheses indicate the start and the end of div:

[Text ------------------ Text]

Do you mean for it to dynamically take up the remaining width? Is the width of the parent fixed? — Zach Saucier, Sep 28 '13 at 22:55
Yes, the remaining width. The width of the div can not be established... — user2827289, Sep 28 '13 at 22:57
Please post some HTML code so we know how the `
` looks like. — Linus Caldwell, Sep 28 '13 at 23:02
It's a bit of a general advice, but I would look for something similar around the web and then just copy the HTML using FireBug or Developer tools (anything that F12 supplies). — Eran Betzalel, Sep 28 '13 at 23:04
Like this, only that the line should not go to a new line, but must stay in the middle of the text and the line have to shorten or expand to fit the text. http://jsfiddle.net/qt8wK/ — user2827289, Sep 28 '13 at 23:04
My problem in understanding is: How is the text aligned? One word at the left, the other at the right? — Linus Caldwell, Sep 28 '13 at 23:06
Please check if this http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle helps. — Manikandan Sigamani, Sep 28 '13 at 23:06

score 6 · Answer 1 · answered Sep 28 '13 at 23:06

using psuedo elements, see that Working Fiddle

HTML:

<div><span>Left</span><span class="right">Right</span></div>

CSS:

span
{
    background-color: white;
}
.right
{
    float: right;
}

div
{
    position: relative;
}
div:before
{
    content: '';
    display: block;
    width: 100%;
    border-top: 1px solid black;
    position: absolute;
    bottom: 50%;
    z-index: -1;
}

You can apply padding: 0 15px; on the span for better result..

score 2 · Accepted Answer · answered Sep 28 '13 at 23:10

Would this work?

div { width: 80%; }
hr { position: relative; top: 0.4em; }
span.left { float: left; padding-right: 0.5em; }
span.right { float: right; padding-left: 0.5em; }

<div>
    <span class="left">Text</span>
    <span class="right">Text</span>
    <hr/>
</div>

Line in the middle of the text

2 Answers2