PDA

View Full Version : Center Alignment

nicky
07-01-2008, 04:19 AM
I use XHTML 1.0 strict as my coding doctrine and I know that the <center> tag isn't valid which is why I created a class called .center and put


<style type="text/css">
.center {text-align:center;}
</style>

<div class="center">
Centered Text
</div>


Now, in Internet Explorer the text centers. However, in Firefox, it does not. Help? I appreciate it.
BoldUlysses
07-01-2008, 04:36 AM
I put together a test page:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>

<style type="text/css">

.center {
text-align:center;
}

</style>

</head>

<body>

<div class="center">
Centered Text
</div>

</body>
</html>

Validates and works fine for me in Firefox 3 and Safari.
smcintyre
07-01-2008, 03:26 PM
Matt's page works for me in FF2 and Opera as well.

Here's another technique:

#Layer-1 {
position: absolute;
margin-left: -318px;
left: 50%;
width: 636px;
}

Just make the margin-left equal to negative half the width.
BoldUlysses
07-01-2008, 03:50 PM
If the goal is a centered page "container," yes, that technique will work, but it has it drawbacks, the main one being that it will make half the page unreadable if the browser window width drops significantly. A better way is the auto margin technique:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>

<style type="text/css">

body {
text-align: center;
}

.center {
text-align:center;
width:636px;
margin:0 auto;
border:1px solid #000;
}

</style>

</head>

<body>

<div class="center">
Centered Text
</div>

</body>
</html>

If the browser window drops below 636px, the container is justified left and remains accessible.
nicky
07-01-2008, 04:16 PM
I'm not talking about centering a container. I've already accomplished that. Here's a more thorough explanation of my problem.


<style>
.center {text-align:center;}

.table {text-align:left;
width:400px;}
</style>

<div class="center">
<table class="table">
<tr>
<td>Text should be centered</td>
</tr>
</table>
</div>


In IE, the table centers. In FF, it does not.
jcdevelopment
07-01-2008, 04:23 PM
if you want both to be centered on the page, cross browser, you need to use

margin:0 auto; /*set a width with this always*/

text-align:center; wont work for FF in this occasion!
BoldUlysses
07-01-2008, 04:36 PM
Try this:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>

<style type="text/css">

.center {
text-align:center;
}

.table {
text-align:left;
width:400px;
border:1px solid #000;
margin:0 auto;
}

</style>

</head>

<body>

<div class="center">

<table class="table">
<tr>
<td>Text should be centered</td>
</tr>
</table>

</div>

</body>
</html>


As JC said, margin: 0 auto; is cross-browser friendly. The fact that IE centers a block-level element like a div using text-align:center; is actually a browser glitch; it should not be doing that as per web standards.