Centering DIVs with CSS - Centering DIVs in a web document with the text-align CSS property
(Page 2 of 4 )
The first technique that I’m going to explore bases its functionality on centering all the elements of a web document by using the “text-align” CSS property in conjunction with the “body” element. In this case, assigning a “center” value to the property in question will cause all the descendant elements of this element to be centered across the whole page.
Even though this technique is pretty simple to grasp, it will be easier for you to understand it if I show you a concrete example. Therefore, below I coded a simple (X)HTML file that builds a centered web page layout by means of the aforementioned “text-align” CSS property. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example on centering DIVS with a liquid layout (uses the text-align property with the body element)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
text-align: center;
padding: 0;
margin: 0;
background: #999;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#header,#footer{
padding: 10px;
background: #ffc;
}
#wrapper{
margin-left: 20%;
margin-right: 20%;
}
#navbar{
padding: 10px;
background: #fff;
}
#navbar ul{
list-style: none;
padding: 0;
margin: 0;
}
#navbar li{
display: inline;
padding: 0;
margin: 0;
}
#navbar a:link,#navbar a:visited{
margin-left: 20px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
text-decoration: none;
}
#navbar a:hover{
background: #fc0;
}
#maincol{
clear: both;
padding: 10px;
background: #fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>This is the header of the web page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" id="about">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="maincol">
<h2>This is main section of the web page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
<div id="footer">
<h2>This is the footer section of the web page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien.</p>
</div>
</div>
</body>
</html>
As depicted above, the previous (X)HTML file simply creates a basic centered web page layout by utilizing the “text-align: center” CSS property, which has been tied to the “body” selector. As you can see, the result of this process is that all of the DIVs included in the document will be displayed perfectly centered in the browser.
This alignment effect can be seen much more clearly in the following screen capture:
Do you now realize how easy it is to create a centered web page layout by way of the “text-align” CSS property? I bet you do! However, while this technique is extremely simple to grasp and code, it has an undesirable side effect. It not only centers all the DIVs that are rendered after the “body” element, but all of their content as well.
Fortunately, this issue can be fixed by introducing a few minor changes into the corresponding CSS styles. It's feasible to reset the centered positioning of the rest of the elements in the web document by placing them to the left via the same “text-align” property, thus achieving the desired centered web page design.
This small changes in the CSS styles of the previous web page will be discussed in detail in the following section. Thus, click on the link below and keep reading.
Next: Aligning DIVs to the left side of the web page >>
More Style Sheets Articles
More By Alejandro Gervasio
