How to center in all web browsers
Migrating from http://viso.myfreeforum.org/How_to_center_in_all_web_browsers_about15.html (July 14, 2008)
Had an interesting situation happen to me today.
While testing the Brown University Fellowship web application today, I found that IE was centering the body of my aspx page but Firefox and Safari were not. I took a look at the CSS file and noticed that the text-align property was set to "center".
CSS code was:
After some research, found that text-align in Firefox and Safari does not work with block content like "div" or "body", etc. Only works with smaller elements like font, etc.
Found this solution:
http://www.maxdesign.com.au/presentation/center/02.htm
Changed the above margin to
Side Note: Firefox (not Safari) will work with this:
Had an interesting situation happen to me today.
While testing the Brown University Fellowship web application today, I found that IE was centering the body of my aspx page but Firefox and Safari were not. I took a look at the CSS file and noticed that the text-align property was set to "center".
CSS code was:
body {
background-color : #cec4a0;
margin : 10px;
padding : 0px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
text-align :center;
}
background-color : #cec4a0;
margin : 10px;
padding : 0px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
text-align :center;
}
After some research, found that text-align in Firefox and Safari does not work with block content like "div" or "body", etc. Only works with smaller elements like font, etc.
Found this solution:
http://www.maxdesign.com.au/presentation/center/02.htm
Changed the above margin to
margin : 0px;
and created a div wrapper inside the body that would hold this CSS style for the entire site:
div#CenterAllBrowsers
{
margin: 1em auto;
width: 80%;
padding: 1em;
text-align: left;
}
So, my apx page had a div with "id=CenterAllBrowsers". This worked on all browsers. {
margin: 1em auto;
width: 80%;
padding: 1em;
text-align: left;
}
Side Note: Firefox (not Safari) will work with this:
#text-align :-moz-center; /*Firefox */
|
|
Comments