CODEWITHSUNDEEP
htmlcsspositioning
max
max

Reputation: 3716

positioning an absolute element in the center of it's relative parent element

here is my code i want child element to be at bottom and center of it's parent

it's in the bottom alright but i cant get it to center

i've tried

text-align:center ;

for parent

and 

margin:0 auto ;

for child but it doesn't work 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative; text-align:center'>
    Outer

    <div style='background-color: green;
                position: absolute; width: 80%; bottom: 0  ; margin-right:auto ; margin-left:auto ; padding:5px'>
                Inner

    </div>
</div>
</body>
</html>

Upvotes: 1

Views: 1732

Answers (1)

user1508519
user1508519

Reputation:

This might answer your question: Centering a percent-based div

Use percentages with your margins.

<div style='background-color: green;
            position: absolute; width: 80%; bottom: 0  ; margin-right:10%; margin-left: 10%; padding:5px'>

Demo: http://jsfiddle.net/DkNdx/

Upvotes: 1

Related Questions