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


here code want child element @ bottom , center of it's parent

it's in bottom alright cant center

i've tried

text-align:center ; 

for parent

and

margin:0 auto ; 

for child 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> 

this might answer question: centering percent-based div

use percentages 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/


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -