CODEWITHSUNDEEP
htmlcsscss-position
LazerSharks
LazerSharks

Reputation: 3155

Position div with center as reference point?

enter image description here

I have a div with dynamic text content. The amount of text varies between one word and five or ten words (with large font). Right now, it's absolutely positioned some amount from the bottom and the right of its relatively positioned parent.

However, since the content is dynamic, it looks awkward when sometimes there is more text and the text goes further into the main area of the parent. This is because right now, the reference point of the div is its bottom right corner. Is it possible to have it positioned with the center as the reference point, as depicted above?

The parent container is just styled as normal, with position: relative; and 100% width and height

CSS for the child container is also fairly standard:

position: absolute;
bottom: 33%;
right: 33;

I've tried playing with width, max-width, and min-width, but the result is still not desirable

Upvotes: 1

Views: 4446

Answers (1)

omma2289
omma2289

Reputation: 54619

How about this? Compare these two fiddles using the CSS below fiddle1 & fiddle2

HTML

<div id="parent">
    <div id="anchor">
        <div id="child">
            <h1>Some text</h1>
        </div>
    </div>
</div>

CSS

#parent {
    position: relative;
    width: 100%;
    height: 100%;
}
#anchor {
    position: absolute;
    right: 33%;
    bottom: 33%;
}
#child {
    padding: 10px;
    margin-right: -50%;
    float: right;
}

Upvotes: 2

Related Questions