Question

I’m trying to make an absolute element align in the middle without a fixed width, this is I’ve tried:

.rm-line {
    background-color: #CCC;
    height: 4px;
    position: relative;
    text-align: center;
}

.rm-line span {
    position: absolute;
    background-color: #FFF;
    padding: 0 10px;
    top: -4px;  
}

Demo at jsFiddle. As you can see in the demo, the text is not centered, I need this to be centered at any text width, even if the text has more or less characters, it should align in the middle.

How can I achieve this?

Answer 1

Assuming that using relative/absolute positioning isn’t a requirement..

You should use display: inline-block on your span instead of position: absolute. The span will be centered by text-align: center on the div.

See: http://jsfiddle.net/2WNPm/12/