Question

I have a div with some text inside and absolute position. I can set the left or the right, but is there a way to set the center, so Div’s text would expand in both directions.

So far I could only think about creating exstremly long div and centering text inside.

Answer 1

If your div is positioned absolutely, you can simply set it’s left property so that it’s centered.

Example:

HTML:

<div class="outer">
    <div class="inner">Some text...</div>
</div>

CSS:

.outer {
    position: relative;
    width: 900px;
}
.inner {
    position: absolute;
    width: 500px;
    top: 0;
    left: 200px;
}

---

If you don’t know the width of the inner element, you’ll have to rely on javascript.

Here’s an example using jQuery:

var $el = $('.inner');

$el.css('left',
    ( $el.parent().width() - $el.width() ) / 2
);

and here’s the fiddle: http://jsfiddle.net/aa93G/ . Play around with the text inside .inner, and you’ll see that the text stays centered.