html - Aligning Div To Middle? -
hello question aligning divs. on website working on fun have div , inside div child div. need child in middle of adult div. left , right aligning in middle stuck top. if me appreciated!
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title></title> </head> <body> <div id="container"> <div id="logo"> </div> <div id="nav"> </div> <div id="content-background"> <div id="content"> </div> </div> <div id="faqs"> </div> <div id="footer"> <div id="footer-right"> </div> <div id="footer-left"> </div> <div id="footer-bot"> </div> </div> </div> </body> </html> * { margin: 0px; padding: 0px; } #container { width: 100%; height: auto; margin-left: auto; margin-right: auto; } #logo { width: 25%; height: 50px; float: left; background-color: red; } #nav { width: 75%; height: 50px; float: left; background-color: green; } #content-background { width: 100%; height: 600px; clear: both; background-image: url('images/background.jpg'); } #content { width: 50%; height: 300px; margin-left: auto; margin-right: auto; background-color: yellow; } #faqs { width: 100%; height: 500px; margin-left: auto; margin-right: auto; background-color: yellow; } #footer { width: 100%; height: 200px; margin-left: auto; margin-right: auto; background-color: red; } #footer-right { width: 50%; height: 150px; float: left; background-color: blue; } #footer-left { width: 50%; height: 150px; float: left; background-color: pink; } #footer-bot { width: 100%; height: 50px; clear: both; background-color: green; }
it seems want align div vertically middle horizontally. child div looks horizontally, aligning center vertically bit trickier.
an easy solution since know height of #content-background position #content relative parent , move down 150 pixels.
#content { ... position: relative; top: 150px; } here's working fiddle http://jsfiddle.net/ry5xu/3/
here's breakdown of how can accomplish true vertical centering: how vertically center divs?
Comments
Post a Comment