This CSS tutorial describes – how to place a child DIV inside a PARENT DIV exactly horizontally centered. How to horizontally center a child DIV element inside a parent or container DIV block. A CSS tutorial by Bikram Choudhury, who conducts web designing coaching classes in Kolkata
If you want to place a child DIV inside another PARENT DIV or container DIV then use the following styles mentioned in STYLE tags below.
- PARENT DIV is of 400px width and height.
- Child is of 200px width and height.
- We applied separate background colors for 2 divs.
- We have set MARGIN of child div element as 0 auto.
- This will apply same margin for left and right margins for child div.
We have tested the following codes in IE6,Opera 10, Firefox 4 and I hope it will work in other browsers too.
A very good guide on Centering using CSS, The centering bugs in Internet Explorer Browser etc described in details @ http://dorward.me.uk/www/centre/#ie
Related Articles :
* Horizontal centering TWO vertically placed child divs inside parent DIV
* Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV
HTML Source Code of the above topic, view picture
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Centering</title>
<style>
.parent { height: 400px; width: 400px; background-color: green;}
.child { height: 200px; width: 200px; background-color: yellow; margin:0 auto; }
</style>
</head>
<body>
<div class="parent">
<div class="child">
Child block whose text is left aligned, Child block whose text is left aligned.</div>
</div>
</body>
</html>