Tim Huffam

Dotting the I and crossing the T of I.T.
  Home  |   Contact  |   Syndication    |   Login
  129 Posts | 0 Stories | 857 Comments | 755 Trackbacks

News

Archives

Post Categories

Interesting Blogs/Links

text-align: center; not working in Firefox

I have the following scenario:

.container{
  text-align: center;
  border: solid 1px blue;
}
<div class=container><table><tr><td>Text</td></tr></table><div>

In IE (6) this displays as you would expect (with the table centered).  However with Firefox (1.5) the table is left aligned.

Apparently this is due to a bug with the way FF handles CSS.

The workaround is to use this:
  text-align: -moz-center;
instead of
  text-align: center;

Don't ask me why "-moz-center" even exists  - it's like they thought 'hey center doesnt work - lets make up our own version of it.. duh!

Oh well - at least  it works (sort of).

HTH

Tim

 

posted on Wednesday, April 19, 2006 7:28 PM

Feedback

# re: text-align: center; not working in Firefox 5/3/2006 1:24 AM phil
Hi, I have the same problem, and your solution works - for Firefox only! How can I make the table centered in both IE and Firefox ?
Where did you find "-moz-center" ?

# re: text-align: center; not working in Firefox 5/3/2006 1:44 AM phil
After some research, a better solution is table { margins: auto; }
since table is a block element (apparantly :)

# re: text-align: center; not working in Firefox 7/2/2006 2:35 AM Joey Avino
I got around this by using both

.table1 {
text-align: center;
}

td {
vertical-align: top;
text-align: -moz-center;
}

The browers pick the one they like and it works in both.

Does anyone know a way around the parse error we got for -moz-center?

# re: text-align: center; not working in Firefox 9/9/2006 8:04 PM helpfulman2
To centre a block you are supposed to set margin-left and margin-right
to auto, but IE doesn't honour this, so you have to use
text-align:center to make IE happy, plus margin-left:auto;
margin-right:auto for the standards compliant browsers.

# re: text-align: center; not working in Firefox 9/12/2006 2:56 PM Dr. Willy
margin-right:auto;
margin-left:auto;

Doesn't work on FF and IE to center a div (at least for me).


# re: text-align: center; not working in Firefox 9/12/2006 2:59 PM Dr. Willy
I ended up using this to make it work on both browsers:
<div align="center">
<div style="text-align:left">Some text</div>
</div>

# re: text-align: center; not working in Firefox 10/26/2006 5:11 PM Age
I got a weird solluction, but it works for me...

CSS:

body /* Internet Explorer */
{
text-align: center;
}

body /* Mozilla Firefox alignment */
{
text-align: -moz-center;
}

Add "body" twice in your css and it will work in both browsers...

# re: text-align: center; not working in Firefox 12/6/2006 3:19 PM Informer
Hey it works. Great, thanks to all.

# re: text-align: center; not working in Firefox 12/15/2006 5:35 AM Govs
thx... it works...

# re: text-align: center; not working in Firefox 1/25/2007 4:06 PM janetk
That fixes Firefox but will still not work for Safari....
margin-right: auto;
margin-left:auto;
works on all browsers if block to center is a table.

# re: text-align: center; not working in Firefox 2/12/2007 7:18 PM Remco
Age's solution works fine for me! Thanks!

# re: text-align: center; not working in Firefox 2/13/2007 4:25 PM Robert V
Thank You!

# re: text-align: center; not working in Firefox 3/24/2007 10:38 PM StAT
THANK YOU!!! thank u thank u thank u!!!

# re: text-align: center; not working in Firefox 3/29/2007 12:57 AM mk
it works however it does not follow w3c...

# re: text-align: center; not working in Firefox 3/29/2007 4:07 PM Michaël
No works for me for safari 2.0.3

#MenuSA ul
{
padding:0;
width:auto;
margin-right: auto;
margin-left:auto;

background-image: url(../images/menu-onglets/bar.gif);
background-repeat: no-repeat;
background-position:center;
line-height: 1,5;
height: 31px;
}

or

#MenuSA ul
{
padding:0;
margin:0;
text-align:-center;

background-image: url(../images/menu-onglets/bar.gif);
background-repeat: no-repeat;
background-position:center;
line-height: 1,5;
height: 31px;
}

# re: text-align: center; not working in Firefox 4/4/2007 9:01 PM Rajko
Easyest way is to put like Age wrote, and it does not need to be body.
Like this:
table.main td {
padding: 0;
text-align: center;
}
table.main td {
text-align: -moz-center;
}


# re: text-align: center; not working in Firefox 4/20/2007 2:19 PM Mo
I found a solution that may help. Thank you all for the aid.

body { /*IE*/
text-align:center;
}

div {/*FF*/
text-align:-moz-center;
}

This will cover both Firefox and IE.

# re: text-align: center; not working in Firefox 4/27/2007 11:18 PM sam
"Apparently this is due to a bug with the way FF handles CSS." Actually this is due to the fact that FireFox handles CSS correctly and is more standards compliant than is IE 6 or 7. If IE6/7 rendered CSS correctly, text-align: center would only center text, and not box-model block elements. You should use margin: auto with a width specified for the container div.

# re: text-align: center; not working in Firefox 4/29/2007 6:12 AM Waleed
People, I really don't know what you're talking about, the code below works perfectly in both IE and FF! (you could also replace the table with a div and it still works)

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &gt;
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
#container
{
background-color: #00FF00;
}
#inside
{
margin-left: auto;
margin-right: auto;
background-color: #FF0000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;container&quot;&gt;
&lt;table id=&quot;inside&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td&gt;The text here is centered&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;

# re: text-align: center; not working in Firefox 4/29/2007 6:14 AM Waleed
People, I really don't know what you're talking about, the code below works perfectly in both IE and FF! (you could also replace the table with a div and it still works)

<!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>
<style type="text/css">
#container
{
background-color: #00FF00;
}
#inside
{
margin-left: auto;
margin-right: auto;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="container">
<table id="inside" cellpadding="0" cellspacing="0" border="0"><tr><td>The text here is centered</td></tr></table>
</div>
</body>

# re: text-align: center; not working in Firefox 5/21/2007 8:29 PM Jeff
"Actually this is due to the fact that FireFox handles CSS correctly and is more standards compliant than is IE 6 or 7. If IE6/7 rendered CSS correctly, text-align: center would only center text, and not box-model block elements. You should use margin: auto with a width specified for the container div."

Designing sites with complicated designs to work on both FF and IE is quite frankly an absolute nightmare, its no better now than it was with Netscape back in the day, possibly worse. I dont care whos fault it is, it makes my life a living hell.

# re: text-align: center; not working in Firefox 5/28/2007 8:28 PM Your Neighbour
Age,
YOU ARE A WINZARD!
How did you work that out by the way? That code's weird indeed, but it works so well!

The left/right-margin:auto thing just won't work.

# re: text-align: center; not working in Firefox 6/24/2007 4:36 AM onion
Age's solution worked for both IE7.0.6 and FF 2.0.0.4:

#main {
text-align:right;
}

#main {
text-align:-moz-right;
}

HOWEVER, if you just do

#main {
text-align:right;
text-align:-moz-right;
}
--- only 1 brower will work. ODD

# re: text-align: center; not working in Firefox 7/5/2007 2:18 PM Ovesen | OOC#
A much cleaner hack is this:

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}

The CSS engine will read both lines and overwrite the second line. But only IE can read the line with '#' char and will therefore be the only browser overwriting it.

I have not tried this in any other browser types.

# re: text-align: center; not working in Firefox 7/18/2007 2:18 PM kali_001
I tried this and able to see it in both FF and IE

.centerMyTable{
text-align:-moz-center;
!text-align:center;
}


But You know what, insteand of ! you can put any NON alph-numeric character. I tried with ^ ~ @ # $ % ^ & * ( ) _ + and it worked

Walalalalala

# re: text-align: center; not working in Firefox 7/23/2007 8:44 AM doctorsound
Dear TIM,

and anyone / everyone else who knew the answer... THANK YOU. I can't believe I didn't go searching earlier. I reckon I have tried every possible combination - without having to revert to using tables - known to man... EXCEPT the -moz-center one.

Thanks again

DoctorSound

# re: text-align: center; not working in Firefox 7/25/2007 7:20 PM Zammer
The best way to center <div> will be i assume..

add <Center> tag before <div> e.g.

<center>
<div/>
</center>

# re: text-align: center; not working in Firefox 8/1/2007 1:38 AM nate
ok so i m having problems with IE showing the text-align in a table.....its working in all other browsers but IE.

part of the code is this:

h1 {
font-size: 36;
color: #ffff00;
text-align: center;
font-style: bold;
}

but nothing is aligning in the center in IE.....any answers?

thanks guys!

# re: text-align: center; not working in Firefox 8/3/2007 10:42 AM na3d
You're going to have to show more of your code buddy. Because that should work.

------------------
Some of the FireFox lovers out there say things like 'it is because Firefox does it right...' No, it is because Firefox is stupid at somethings. It is okay when it is standards strict, but needing to make [text-align: -moz-] to align text how you want is just stupid. Same with opacity, if anything it is just trying to be a pain.

# re: text-align: center; not working in Firefox 8/10/2007 2:23 PM miiiiike
This works fine in FF and IE:

body {
text-align:-moz-center;
#text-align:center;
}

# re (sam): text-align: center; not working in Firefox 9/7/2007 1:06 PM Alexi
The fact of the matter is that when you tell something to align center and it doesn't ALIGN CENTER is fricking ridiculous.

Now because of this stupidity, I have to add all kinds of ridiculous EXTRA code, not to mention go and apply the margin autos to all the tables and shit inside the div!!

*GLARE*

# re: text-align: center; not working in Firefox 9/28/2007 10:41 AM Jron
body {
text-align:-moz-center;
#text-align:center;
}

Doesn't work in safari...

# re: text-align: center; not working in Firefox 10/2/2007 4:35 AM doctormad
<td style="text-align:center;">
<table style="margin-right: auto; margin-left:auto;">
[...]
</table>
</td>

Works fine with table, thanks ;)

# re: text-align: center; not working in Firefox 10/5/2007 1:45 PM Tapan
Zammer.. you're genious. It's so simple and yet we make it so complicated. Wrapping everything with <center> tag worked! Thanks so much!

# re: text-align: center; not working in Firefox 10/18/2007 12:42 PM kees
<center> doesn't help you if you try to get you xhtml valid strict 1.0

# re: text-align: center; not working in Firefox 10/29/2007 1:46 PM wdsfsdfsdfsd
This just is a stupid error.
To center some text we have to worry about cross browser?
Just ridiculous if you ask me.

someone needs to teach these companies something called " industry standards"





# re: text-align: center; not working in Firefox 11/1/2007 8:36 AM Aqajani
this way is very good and easy to "test-align:center" in FF
<center >
<table><tr><td> some text </td></tr>
</center>
try it &


# re: text-align: center; not working in Firefox 11/26/2007 8:41 AM a
People use this snippet, works on both.

style="text-align:center; margin-left:auto; margin-right:auto;"

# re: text-align: center; not working in Firefox 11/26/2007 3:44 PM polk
"The fact of the matter is that when you tell something to align center and it doesn't ALIGN CENTER is fricking ridiculous. Now because of this stupidity, I have to add all kinds of ridiculous EXTRA code, not to mention go and apply the margin autos to all the tables and shit inside the div!!"


welcome to software development!!

# re: text-align: center; not working in Firefox 12/12/2007 9:34 AM ithinkx
Alexi: but we're not saying align center, we are saying tex-align:center to align a table. don't you see?

# re: text-align: center; not working in Firefox 12/12/2007 9:35 AM ithinkx
tex = text

# re: text-align: center; not working in Firefox 1/9/2008 9:30 AM BugFixer
This works great. I dont know if it's validating though!

# re: text-align: center; not working in Firefox 1/26/2008 3:43 PM Cher
Hey...I tried the simple (center tag) before the (div) and it centered my table in IE and FF.
Thank you!

# re: text-align: center; not working in Firefox 1/26/2008 10:42 PM Waqas

<center>
<div align="center">

Page Contents Here

</div>
</center>


This works for me in both IE and Firefox.

# re: text-align: center; not working in Firefox 2/26/2008 12:20 PM ishtiaque
THANKS A LOT!!!!!!!!!

# re: text-align: center; not working in Firefox 3/1/2008 2:15 AM Zeeshan
Thanks Zammer,
Your suggested solution worked.

# re: text-align: center; not working in Firefox 3/4/2008 5:49 PM Roger
Thank You~Love you so much

# re: text-align: center; not working in Firefox 3/22/2008 3:54 AM Kamil Szmit
How to center my menu http://szmitek.winweb.pl/Default.aspx? The page uses Style Sheet http://szmitek.winweb.pl/StyleSheet.css


<div id="ctl00_Nav" class="Nav">

<ul id="ctl00_Home" class="Current">
<li>



Strona główna

</li>
</ul>
<ul class="Select">
<li>
Joseph
Turner

<div class="SelectSub">


<ul class="Sub">
<li>
Fishermen
at Sea

</li>
<li>
The
Shipwreck

</li>
...
</ul>

</div>
</li>
</ul>

</div>

Style Sheet:

...
.Nav {
...
position: relative;
...
text-align: center;
padding-top: 0;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
.Nav .Select .Nav .Current {
padding: 0;
list-style: none;
...
text-align: center;
margin-left:auto;
margin-right:auto;
}
.Nav li {
float: left;
list-style-type: none;
text-align: center;
margin-left:auto;
margin-right:auto;
}
.Nav .Select a {
display: block;
height: 35px;
float: left;
...
text-align: center;
margin-top: 0;
margin-left:auto;
margin-right:auto;
}
.Nav .Current a {
text-align: center;
margin-top: 0;
}
.Nav .Select :hover .Sub li a:hover, .Nav .Current .Sub li a:hover {
text-align: center;
margin-left:auto;
margin-right:auto;
}

# re: text-align: center; not working in Firefox 3/24/2008 1:23 PM Armando
I am having an issue with text-align:left; in FF. I am trying to align text within a div. IE places the text at the left hand side of the div, but FF centers it. I have other areas on the page where FF is properly rendering text-aligns but in this one instance no good. The div only contains two links. It is only nested inside of the body tag. and has the same margin, border, and padding settings as other divs which are working fine. Any suggestions?

# re: text-align: center; not working in Firefox 3/25/2008 11:08 AM nrbatcha
It works for me to IE and FF, expecting for Safari :)

# re: text-align: center; not working in Firefox 4/3/2008 10:15 AM Steve Weller
I had a problem centering a caption for an image in FF but fixed it with the "display: block" property. This now works in IE and FF, etc...

<span class="smalltext" style="display: block; width: 160px; text-align: center;">
The Pantheon
</span>

# re: text-align: center; not working in Firefox 4/17/2008 6:54 AM Larry
I'm having a similar problem with margin-left.
FF seems to be ignoring it, though it works in IE.
I'm trying to eliminate space between images that are being displayed horizontally for a menu.
Below does it in IE, but only works on the right side of the image in FF.
The images are tabs and when I add margin-left, it cuts off the right side of the image.
For example, let's say the word IMAGE is the graphic.
By adding margin-right: -9 I can cut the letter E off.
I would like to also cut off the letter I.
However, when I add margin-left, it cuts off the G and E.
It leaves me with IMA when what I want is MAG.

{
PADDING-RIGHT: 0px! important;
PADDING-LEFT: 0px! important;
MARGIN-TOP: 3px! important;
MARGIN-RIGHT: -9px! important;
MARGIN-LEFT: -9px! important;


}

# re: text-align: center; not working in Firefox 4/22/2008 2:23 AM amanda
This hack does work great in FF, so now my div is working correctly in all browsers but safari. Wierd.

The div itself should center and the text in it should align to the right of the width of the div. Instead, the entire div is aligning left...but the text is aligned correctly :o)

Any idea what could be wrong with safari?

[code]

#divUserControlPanelNavWrapper{
margin-right:0 auto;
margin-left:0 auto;
padding:0;
text-align:center;
text-align: -moz-center;
position:absolute;
z-index:100;
top:485px;
border: 1px solid red;
width:99%;
height:21px;
}

#divUserControlPanelNav {
text-align:right;
margin-right:0 auto;
margin-left:0 auto;
position:relative;
width:955px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#02004c;
height:17px;
padding-top:5px;
padding-bottom:0px;
background-color:#FFFFFF;
border:1px purple solid;
}

[/code]

# re: text-align: center; not working in Firefox 4/28/2008 2:46 AM Grov
Most problems with non-centring in FF are caused by the margin being set to zero at some point, usually in a parent container (mine was set in the 'body' tag on my main style sheet - can't remember why!).

I solved all my non-centring problems by adding the following to my style sheet

div {margin-left:auto ; margin-right:auto }
table {margin-left:auto ; margin-right:auto}

In FF the margin settings take precedence over other 'center' commands - hence the frustration.

If a container has the requirement to be centred AND have a left margin of zero then the latter wins!

Someone has pointed this out further up but I thought I'd stress the point.



# re: text-align: center; not working in Firefox 5/19/2008 12:17 PM xtophernator
thanks, Grov.

This issue has been giving me nightmares for ages, and such a simple answer!
I also had margins of zero set in my body tag and it didn't even occur to me that that was overridding the margin:auto.
Thanks heaps

# re: text-align: center; not working in Firefox 5/22/2008 6:01 AM kamal
text-align:center;

does not work in IE8 (in standards mode) either.

margin-right: auto;
margin-left:auto;

does work in firefox and IE8 so that is probably a better solution.

# re: text-align: center; not working in Firefox 5/22/2008 1:18 PM mb
<pre>
<center>
<div style="text-align:center; margin-left:auto; margin-right:auto;" >
</pre>

does not work for FF 2.0.0.12

# re: text-align: center; not working in Firefox 6/7/2008 2:03 AM Ardvar
close out the center and div, I never work with pre tags, so i dont know how that might mess with it as well. unless you were trying to use those for the code to show. in that case, throw a border on it real quick and make sure there is room for it to use.

Though I dread it at the same time, I cant wait for OS's to be fully scalable. I just hope browsers are forced to follow suit, because I am sick of font appearing so differently...

# re: text-align: center; not working in Firefox 6/23/2008 3:16 AM sAeid mOhammad hAshem
you can use this for div

<div style="text-align:center;direction:rtl;">
<div style="text-align:-moz-center;direction:rtl;">
.
.
.
</div>
</div>

and use for Table

<table>
<tbody style="text-align:-moz-center;">
....


or in body of pages
body
{
text-align:-moz-center;
text-align:center;
.
.
.
}



# re: text-align: center; not working in Firefox 6/26/2008 10:23 PM Nick
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.container {
text-align:-moz-center;
#text-align:center;
}
.row {
display:table-row;
width:300px;
}
.row li {
text-align:left;
display:table-cell;
float:left;
width:100px;
}



</style>
</head>
<body>

<div class="container">
<div class="row">
<li>i am the king of the world.</li>
<li>2</li>
<li>3</li>
</div>
<div class="row">
<li>2</li>
<li>5</li>
<li>2</li>
</div>
</div>

</body>
</html>

# re: text-align: center; not working in Firefox 6/26/2008 10:23 PM Nick
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.container {
text-align:-moz-center;
#text-align:center;
}
.row {
display:table-row;
width:300px;
}
.row li {
text-align:left;
display:table-cell;
float:left;
width:100px;
}



</style>
</head>
<body>

<div class="container">
<div class="row">
<li>i am the king of the world.</li>
<li>2</li>
<li>3</li>
</div>
<div class="row">
<li>2</li>
<li>5</li>
<li>2</li>
</div>
</div>

</body>
</html>

# re: text-align: center; not working in Firefox 7/14/2008 10:19 PM Paul_r
*Zammer: The best way to center <div> will be i assume..

add <Center> tag before <div> e.g.

<center>
<div/>
</center>*

This also works around 'table'. I had this issue in the footer of a vBulletin that had this problem, so was stuck with 'table' unless I wanted to mod it a lot.

i.e.

<center>
<table>
stuff
</table>
</center>

worked fine.

Thanks for that Zammer.

# re: text-align: center; not working in Firefox 8/13/2008 3:17 AM RJB
I am really starting to get annoyed at people claiming that Firefox is so standards compliant and IE is not.

That is NOT true.

take a look at this link http://www.w3.org/TR/CSS1/#text-align

Since 'text-align' inherits, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.

so text-align SHOULD align all elements within the div tag.

the fact that Mozilla bother to create a "standard" tag such as -moz-align should tell something shouldn't it?

it's not the first time I found FF grossly ignores standards, yet, in people's mind it's so compliant. IT IS NOT. And I am talking about Firefox 3 btw.

# CSS text-align vs <center> 8/15/2008 6:21 AM aGuy
I tried this for my project (work for IE7 and FF 3.0):

BODY
{
text-align: -moz-center !important;
text-align: center;
}

see guys it is important to make css responsible for layout and rendering and not to mix it up. Let's be cohesive. Then you can change the whole desing without any change to the page.

center is not xhtml valid, so I just can't use it. Every program, structured file, etc... should be as strict as possible. In some company you can even put in production any pice of code with compilation warnings.

Be xhtml strict is not so hard by the way, just take good habit now :
http://validator.w3.org/#validate_by_uri+with_options


# re: text-align: center; not working in Firefox 8/22/2008 5:22 AM SlaKi
All right, guys... Now, another question: how to center something ( text or a block ) vertically ?

"vertical-align: middle" does not work neither in FF nor in IE.

Also, I wanna express my thank you to all of you, guys, I really liked all the solutions that you offered, honestly. But Zammer's <center> is the best !
: )



# re: text-align: center; not working in Firefox 8/22/2008 5:31 AM SlaKi
Hah ! Even another question: how to right-align something ?
: )))


# re: text-align: center; not working in Firefox 8/24/2008 2:45 PM footmarx

body{ text-align: -moz-center !important; text-align:center;}

working in IE and firefox

# re: text-align: center; not working in Firefox 8/30/2008 10:59 PM parke
Thank You :)))

# re: text-align: center; not working in Firefox 8/30/2008 11:00 PM rüya tabiri
Thank yOu

# re: text-align: center; not working in Firefox 8/30/2008 11:00 PM rüya tabirleri
Thank YOu...

# re: text-align: center; not working in Firefox 9/4/2008 2:28 PM Newb
Thanks, worked a treat.

# re: text-align: center; not working in Firefox 9/7/2008 2:22 AM y-greg
ul#mainlevel-menu-top2 li img {
display: block;
text-align: center;
margin-left:auto;
margin-right:auto;
!margin-left:0;
!margin-right:0;
}
This solution works both ie 6 and ff for me for centering img in a div :) thanks a lot
i think it will work on ie 7 and Safari too.
The "!" is being interpreted by ie only. and that`s a hack :)

# re: text-align: center; not working in Firefox 9/12/2008 3:30 PM Mr. Vaughan
Thank you sooooo much, I've been living with this issue for months and haven't been able to fix it.
This is exactly the solution I needed.

# re: text-align: center; not working in Firefox 9/13/2008 3:56 PM Simone
I use Ovegen's hack above; it works perfectly in both FF3 and IE7. I don't know about Safari though. I'm sure (or I hope) the ! hack works as well. Thanks everyone!

SlaKi > vertical-align:

One workaround is to set the height of the table to 100% of the page height, but this isn't really practical, more of a logical loophole (sorry):

table#vcenter { height: 100% } /* this doesn't work with the HTML attribute in <table height="100%"> */

The real, clumsier workaround is to create a containing <div> and set both of its top and bottom padding with equal values, but they and the table have to be taller than the screen.

<div style="padding-top: 20%; padding-bottom: 20%">
<table style="height: 300px">

etc.

Hope that helps, keep experimenting (and posing theoretical questions).

Oh, and right-aligning a block should be as easy as style="float: right". It works even without a <div> container.

# re: text-align: center; not working in Firefox 9/13/2008 3:59 PM Simone
* Ovesen. Sorry.

# re: text-align: center; not working in Firefox 9/14/2008 12:32 PM jscriptnut
The official way is to set margin-left and margin-right to auto and specify the width of the container element, according to Web Design in a Nutshell 3ed., O'reilly 2006.

# re: text-align: center; not working in Firefox 9/19/2008 12:21 AM Sathiskumar
hi

body /* Internet Explorer */
{
text-align: center;
}

body /* Mozilla Firefox alignment */
{
text-align: -moz-center;
}

this is working with IE and Firefox but it is not working with Google Chrome



# re: text-align: center; not working in Firefox 9/26/2008 2:29 AM Ixnay566
As a lot have said <center> is by far NOT the best way to do it!! The best ways is just as jscriptnut has said

#container
{
margin-left:auto;
margin-right:auto;
width:100px;
}

there must be a width specified or else it doesn't fit into the flow. also remember that when you specify somethign to float right or left, it takes them out of teh normal flow, and puts them in the kinda float flow. so for example if you have somethign to float right, then you wanted to make say a footer containter, it would also be at the top of the page, because you took the other container out of the flow. At least thats how it should work, IE it keeps them in the same flow and it comes out lookign correctly. firefox and safari do what is suppoed to be done.

# re: text-align: center; not working in Firefox 9/26/2008 6:02 AM Skye
janetk's solution worked for me:

margin-left:auto; margin-right:auto;

# re: text-align: center; not working in Firefox 10/4/2008 10:59 PM Christian Ortiz
:::WORKING WITH DIVS & CSS:::
ASIGN THIS VALUES TO THE DIVS
(Tested in Mozilla Firefox 3 & Internet Explorer 7)

FOR CENTER ALIGNING:
margin: 0 auto;

FOR RIGHT ALIGNING:
margin: 0 0 0 auto;



# re: text-align: center; not working in Firefox 10/7/2008 7:52 AM Mike
Have the same problem, but a little dofferent. Seems everyone is using tables, and I can't.
The problem is left align, again works fine in IE but not firefox.
Trying to left align this:
<ul>
<li>1</li>

<li>2</li>
<ul>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<li>6</li>
<li>7</li>
</ul>
thanks,
Mike

# re: text-align: center; not working in Firefox 10/18/2008 10:40 AM ViewTribe Media
This previous post by someone worked for me:

"I got a weird solluction, but it works for me...

CSS:

body /* Internet Explorer */
{
text-align: center;
}

body /* Mozilla Firefox alignment */
{
text-align: -moz-center;
}

Add "body" twice in your css and it will work in both browsers...


# re: text-align: center; not working in Firefox 10/19/2008 7:40 AM jero
perfect! thanks!!

# re: text-align: center; not working in Firefox 10/19/2008 7:42 AM Jero
( thanks to Tim i mean.. not to the upper comments :P )


body {
text-align: center;
text-align: -moz-center;
}



# re: text-align: center; not working in Firefox 10/20/2008 8:17 AM vita
just use this...work fine...at least for me... ('',)v


<table id="main" width="950px" border="0" style="margin: 0 auto">

# re: text-align: center; not working in Firefox 11/17/2008 10:15 PM Kudaravalli Sai
Thank you to ALL

# re: text-align: center; not working in Firefox 11/20/2008 1:53 AM Willi
Here is a clean design that does not require any hack and works for me on IE, Safari and FF - no tables, no JavaScript, no declaration for different browser types - enjoy :)


#div_container {
position: absolute;
left: 50%;
height: 100%;
width: 1000px;
margin-left: -500px; /* MUST be half the width */
}



Post Feedback

Title:
Name:
Email: (never displayed)
Url:
Comments: 
Please add 2 and 5 and type the answer here: