How to horizontally center two child DIV elements place vertically one after another inside a PARENT DIV container element and the child DIVs will be exactly horizontally centered.
- PARENT DIV is of 400px width and height.
- Child is of 200px width and height.
- We have set the positioning property : RELATIVE of Parent div.
- That means inner DIVs inside parent will be placed relative to parent / container div.
Then we have placed a wrapper just outside of two vertical DIVs. Two child vertical DIVs are of margin: 0 auto , which places child DIVs with respect to WRAPPER divs.
We have tested the following codes in IE6,Opera 10, Firefox 4 and I hope it will work in other browsers too.
If you find out any problem then email me: bikramchoudhury@hotmail.com
Related Articles :
Horizontally centre a DIV block with respect to container DIV block
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 of two vertical divs of different width height</title>
<style>
.parent { height: 400px; width: 400px; background-color: green; position: relative;}
.wrapper { position: relative}
.content { height: 200px; width: 200px; background-color: yellow; margin:0 auto; }
.color_change_with_centering_text { height: 100px; width: 100px; background-color:#99FF33; color: red; text-align:center }
</style>
</head>
<body>
<div class="parent">
<div class="wrapper">
<div class="content">
Child block 1
</div>
<div class="color_change_with_centering_text content">
Child block</div>
</div>
</div>
</body>
</html>