Hi,
I have search a while so i think it should be usefull to share.
If you want to horizontally center bloc in html you will use table or the tag <center>, but for those who only see through css to format their page, there is a means to do it also.
| CODE | <html>
<head>
<style type="text/css" media="screen">
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding */
text-align:center; /* Hack for IE */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
</style>
</head>
<body>
<div id="Content">
<p>A box in the center with the inner text on the left</p>
</div>
</body>
</html>
|
the tricks is to set left and rigth maring to auto. Has IE has some compatibilty problems, we use the fact that it aligns block with text-align property. This leads to all the text is then center aligned. Thus, we put a counteract text-align property set to left to go to default value.
|
