Tim Huffam

Dotting the I and crossing the T of I.T.

  Home  |   Contact  |   Syndication    |   Login
  153 Posts | 0 Stories | 2747 Comments | 653 Trackbacks

News

Archives

Post Categories

Interesting Blogs/Links

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/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/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 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/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/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 */
}



# re: text-align: center; not working in Firefox 12/7/2008 11:26 PM Matty G
You don't even need to double up on the curly brackets.

just a simple:
type.class {text-align:center; text-align: -moz-center }

Don't ask me why mozilla decided to create their own centering tag for css, when they could have just incorporated the standard centering property into their browser.

# re: text-align: center; not working in Firefox 12/10/2008 5:59 AM dsdeur
Thanks that really helpt me.

# re: text-align: center; not working in Firefox 12/24/2008 10:37 AM StillNotFixed
They have not fixed this yet!!!!

The "margin: auto" on the table in the container worked for me.

# re: text-align: center; not working in Firefox 1/5/2009 5:51 PM Sheethal
Just Put the content needed in the <center></center> tag. It will align properly in Firefox and Google Crome correctly.



# re: text-align: center; not working in Firefox 1/17/2009 11:01 AM Mohamed
<center></center> The only thing that worked for me on 3 browsers perfectly (IE7, Firefox3, Chrome)

# re: text-align: center; not working in Firefox 2/5/2009 2:51 PM reaper7861
ok first off <center> is deprecated second off text-align: -moz-center does not pass css validation, so the fix for this is ,passes validation and works in both browsers, and is a better way of doing it all around:
.container{
width: 260px; #set this to the width desired
margin-right: auto;
margin-left: auto;
}
Hope this helps

# re: text-align: center; not working in Firefox 2/10/2009 5:01 PM vv
The best way is what reaper7861 said. It works on IE and FF.

Does anybody know if it works on Safari?

# re: text-align: center; not working in Firefox 2/15/2009 12:31 PM Pedro
works on IE/FF/OPERA/Safari

:)




# re: text-align: center; not working in Firefox 2/21/2009 9:17 AM simon
Can get it centred ,cant aline the txt it drops down, any suggestions

thanks

# re: text-align: center; not working in Firefox 3/5/2009 3:16 PM Dave
I'm trying to implement the off-center fix detailed in these posts, but I'm an absolute noob and have no idea *where* to put the code. As you can see, the header on my site is off center in FF, but displays correctly in IE,chrome, safari.
Is there a kind soul who can tell me exactly where on my page to put that code fix?
www.birthdayrock.com

# re: text-align: center; not working in Firefox 3/20/2009 8:35 PM Shaju K J
AM Waleed's solution is the best.

# re: text-align: center; not working in Firefox 3/25/2009 11:07 PM Patrick de Ruijter
Reaper7861 had the solution for me

# re: text-align: center; not working in Firefox 4/9/2009 8:28 AM mym
Hi,
I read all posts and still dont know how to do this, check my site plz http://www.kotki.teha.pl/0706.html and tell me why its not working on firefox, i think i tried all, and im despered ; (
PLZ can anyone help me?
THX

# Centered column works in all browsers 4/12/2009 9:06 AM David
Hi, I confirm that Ixnay566's solution works fine for me with Chrome 1.0.154.53, Firefox 2, IE 7, and Safari 4 (beta)
[code]
#container {
width: 908px;
margin 0 auto;
}
[/code]

Alternatively, Sitepoint has a solution without using any container (using html and body elements):
http://www.sitepoint.com/blogs/2009/02/11/styling-the-html-and-body-elements/


# re: text-align: center; not working in Firefox 5/16/2009 8:20 AM Frap
follwing Age's approach, this worked for me...

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

# re: text-align: center; not working in Firefox 5/25/2009 8:53 PM MJ
this worked for me across FF, Google Chrome and IE

.container{
background-position:center;
background-image:url(../Images/MiddelBack.jpg);
background-repeat:repeat-y;
padding:0px;
text-align:center;
text-align: -moz-center;
text-align: -khtml-center;
margin-right:auto;
margin-left:auto;
}

# re: text-align: center; not working in Firefox 5/26/2009 6:47 AM jock
add a border to your table and it seems to corect the alignment


<table border="1">
<tr>
<td align="center"> blah1 </td>
<td align="center"> blah2 </td>
<td align="center"> blah3 </td>
</tr>


# re: text-align: center; not working in Firefox 6/3/2009 10:54 AM JXZ
This line will solve your problems in Safari and Chrome

text-align: -khtml-center


# re: text-align: center; not working in Firefox 6/13/2009 1:03 AM chen2x
++ gue2x bstah wag qa mniniwla sah sav sav ++



++sna 2magal tau mhal ++



++nah mhal kita VHENTE_KWATRO+















BB.G'PiNAii.FLi CkA.DkOLL.1NE

# re: text-align: center; not working in Firefox 7/2/2009 9:05 AM Venkat raja,india
You can use

.div{
display:block;
margin-left:auto;
margin-right:auto;
}

This is used to center the object to any browser. Try it..

# re: text-align: center; not working in Firefox 7/14/2009 5:17 PM Fediuc Alexandru
<body style="text-align:center;">
<div id="container" style="width:800px;text-align:center; margin:auto" >
</div>
</body>

And now what you put in the middle it will be arrange like u want it :)

# re: text-align: center; not working in Firefox 7/17/2009 10:55 AM Vimal Saifudin
Thanks a lot... Your solution helped me to solve this issue which i was wandering for more than an hour

# re: text-align: center; not working in Firefox 8/13/2009 1:40 AM Jörgen
<center >

Hmm thats just briliant :-) Works perfectly..

# re: text-align: center; not working in Firefox 8/18/2009 8:01 AM Joe
How about a final solution for all browsers? Nothing here seams to work for me..

# re: text-align: center; not working in Firefox 8/25/2009 12:23 AM sAeid Mohammad Hashem
you can used this solution:
1-=====================================<style type="text/css">
#DivCenter{text-align:-moz-center;background-color:blue;width:100%;}
</style>
<!--[if IE]>
<style type="text/css">
#DivCenter{text-align:center;background-color:red;width:100%;}
</style>
<![endif]-->

1-=====================================

2-=====================================
or use the center tag (<center> ... </center>)
2-=====================================

or you can use

3-=====================================
<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;
.
.
.
}
3-=====================================

# re: text-align: center; not working in Firefox 8/25/2009 12:27 AM sAeid Mohammad Hashem
you can used this solution:
1-=====================================
<style type="text/css">
#DivCenter{text-align:-moz-center;background-color:blue;width:100%;}
</style>
<!--[if IE]>
<style type="text/css">
#DivCenter{text-align:center;background-color:red;width:100%;}
</style>
<![endif]-->

1-=====================================

2-=====================================
or use the center tag (<center> ... </center>)
2-=====================================

or you can use

3-=====================================
<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;
.
.
.
}
3-=====================================

# re: text-align: center; not working in Firefox 9/11/2009 3:05 AM dinesh chuadhari
thanks a lot i use
margin-left:auto;
margin-right:auto;

that works fine for me.

# re: text-align: center; not working in Firefox 10/1/2009 4:13 PM Shawn
7 hours and two computer crashes later and not one of these solutions works for me. Thanks for all of your suggestions, tho.

# re: text-align: center; not working in safari 10/6/2009 1:59 AM Tina
does anyone know the solution for safari?

# re: text-align: center; not working in Firefox 10/9/2009 2:11 PM Will
WOW. I have spent nearly 2-3 hours trying to get just my headline to center properly in both IE and Firefox. Well, who would have known it was as simple as adding <center> before the text. I figured that I already had that, but it was crazy when I tried all of this complicated stuff then the simplest thing worked.

# re: text-align: center; not working in Firefox 11/5/2009 6:56 AM sudhir
very nice forum

# re: text-align: center; not working in Firefox 12/2/2009 9:06 AM ET
kali_001's method work for me.
I am using the in line style!.

# re: text-align: center; not working in Firefox 12/14/2009 1:21 AM DVV
text-align: center;
text-align: -moz-center;

wonderful

# re: text-align: center; not working in Firefox 12/15/2009 1:50 PM Jawsie
This just works for me. Looks a bit naff but let's face it, fairly straightforward. Thanks to all above!

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

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

body /* Google Chrome */
{
text-align: -khtml-center;
}

# re: text-align: center; not working in Firefox 12/17/2009 8:09 AM saber
<center> </center>

# re: text-align: center; not working in Firefox 1/6/2010 2:31 AM ABRHAM
AMMMM PS YO LES BOY A ABLAR SOBRE ESTA NIÑA HERMOXA KE SE LLAMA !!MARIA DE JESUS!! Y PS ELLA TIENES 17 AÑITOS BIEN GOSADOS PORSUPUESTO PS SU CUMPLE ES EL 3 DE MARZO PARA KE BALLAN COMPRANDO SU REGALO OK :D.......PS A ELLA LE GUSTA ANDAR DE PARY Y PS SE LA VIVE EN LA CALLE SIEMPRE ANDA AL 100 OK PARA KE NO SE METAN KON ELLA XD......
PS LA PLEVE ES ENAMORDA ASI NOMAS LES DIGO....Y PS KE LES DIGO ESTUA LA PREPA.....PFFFF Y PS ES A TODA MAADRE KOMO ELLA NUNCA BAN A ENCONTRAR A NADIE IGUAL ESO SE LOS ASEGURO....Y PS SI SI TIENE NOVIO PS EL EL ESNICK DEL 1040 HAHAHA NO PS SE BE KE LO KIERE UN CHINGO PS ASI KOMO YO LA KIERO A ELLA NTK.......
NO PS OK TKM MARIAAA... XD ATT:*ABRAHAM* "SFLICK".........

# re: text-align: center; not working in Firefox 3/17/2010 11:52 AM Elise
Hello, this is all wrong. Even w3school states:

"Note: Using margin:auto will not work in Internet Explorer, unless a !DOCTYPE is declared."

margin:auto will work if you enter this in the first few lines of your document.

<!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>

Then
.center{
margin-left:auto;
margin-right:auto;
width: 800px;
}
will work. Hope that helps. Simple solution =)

# W3C Validation Sign Up | Website Validation | HTML Validator W3C | W3C Validator | W3C Validate | CSS Validator W3C 4/27/2010 7:06 AM w3cvalidation
Nice information, I really appreciate the way you presented.Thanks for sharing..



# re: text-align: center; not working in Firefox 9/22/2010 6:55 AM Dave
I tried everything above to center tables in div for firefox, but nothing worked.

The only way I could get the tables to center in firefox was to enclose the tables with paragraph tabs.

For example:

<div>

<p align="center">

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

</p>

</div>

# re: text-align: center; not working in Firefox 9/23/2010 11:37 PM Dave
I have sorted out the problem. I used...

<div align="center">
That works in all browsers; and if you need more, add class information like
<div class="mydiv" align="center">
and put it in your CSS file.

To your success,

Dave

# re: text-align: center; not working in Firefox 10/27/2010 11:54 AM JP
Ok, this is the first time I have ever posted to an online forum - yes I live under a rock and am really new to web-design. I spent an hour trying to center in Firefox and using fancy tricks in css but what finally worked was just typing <center> under </head> in the html.

# re: text-align: center; not working in Firefox 4/15/2011 2:09 AM Prashanth
body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
this works,
this works,
this works,
this works,
this works,


# re: text-align: center; not working in Firefox 5/13/2011 5:10 AM will
This is greate thanks 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 5/16/2011 3:41 PM clue
I've got tired of this ^%$@#.

I have a visible (display: block) table, and 4 more with display: none. When, by Javascript, I switch one to display: block, or inline-block, or margin: 0 auto, or -khtml-center (OMG lets invent some more values in case it works on Safari) , or margin-left: 0, or -moz-center, or <center>, or <div align="center..., or whatever, DOESNT WORK, it just goes left...

My solution... GRAAAGGGGG to the hell with tables! div everything and position wherever you want :@

# re: text-align: center; not working in Firefox 6/15/2011 5:11 PM dogdaynoon
Read Careful.
IE = Garbage
That said, the other browsers are right and IE is wrong in this instance.
Do this and all will be well.
.body {margin-left:auto; margin-right: auto}
.forIE {#text-align: center;} /* IE */
Set that in a <div id="wrapper" class"forIE"> tag that ecncompases the entire document after the body and before the /body tags.
should work great. let me show you.
Stylesheet like this:
body {margin-left: auto; margin-right: auto;}
.forIE {#text-align: center;}

html:
<body>
<div id="wrapper" class="forIE">
.......all yer html goes here........
</div><!-- end wrapper div -->
</body>
</html>
good luck

# re: text-align: center; not working in Firefox 6/15/2011 5:12 PM dogdaynoon
.body on line 5 of last post should read "body" not ".body"


# re: text-align: center; not working in Firefox 6/21/2011 6:49 AM kandie
@dogdaynoon YOU ARE GENIUS!!!!
I read this WHOLE POST of great communication and tried EVERYTHING that was listed. If someone said, what DogDAyNoon said at the bottom, earlier in the post, apologies on the credit, but it was this last post that actually worked for me. AWESOME, I tried for HOURS, I'm a newbie in CSS and trying to do cross browser so I'm so happy I ran across this forum and now, I can go go to the day relaxed. Have a blessed day.

THIS ABSOLUTELY WORKED FOR ME [per dogdaynoon's post]

Read Careful.
IE = Garbage
That said, the other browsers are right and IE is wrong in this instance.
Do this and all will be well.
.body {margin-left:auto; margin-right: auto}
.forIE {#text-align: center;} /* IE */
Set that in a <div id="wrapper" class"forIE"> tag that ecncompases the entire document after the body and before the /body tags.
should work great. let me show you.
Stylesheet like this:
body {margin-left: auto; margin-right: auto;}
.forIE {#text-align: center;}

html:
<body>
<div id="wrapper" class="forIE">
.......all yer html goes here........
</div><!-- end wrapper div -->
</body>
</html>
good luck


# re: text-align: center; not working in Firefox 7/21/2011 8:58 AM a.oveissian
One of the ways that I've used since IE 6 and works up to current version 9, it is also compatible with firefox and chrome is: using 2 DIVs when page width is defined in % (but not pixels); that is why I think the order of browser compilation for % may be different in browsers from when width is defined pixel!:

<body style="text-align: center;margin-left =0; margin-top = 0; margin-right =0; left=0; right=0;" >
<DIV align="Center">
<DIV style="text-align:center">
Your content...
</DIV>
</DIV>
</Body>
if your program is ASP.NET, put your form inside DIVs.


# re: text-align: center; not working in Firefox 7/24/2011 8:01 PM James
I found doctormad's solution;
<table style="margin-right: auto; margin-left:auto;">
worked in IE, Opera, Safari, FireFox and Chrome

# re: text-align: center; not working in Firefox 8/11/2011 9:18 AM a.Oveissian
Addition to my previous post above:
Do not forget using [HorizontalAlign= "Center"] in the case you have GridView, Repeater or DataList inside ASP.NET panel or HTML DIV, this was the only tag that saved my center alignement in FireFox (it was working in IE without this tag)

# re: text-align: center; not working in Firefox 10/10/2011 1:43 AM Vinay patil
Panel.getElement().setAttribute("align", "CENTER");


This should work on both the browsers.

# re: text-align: center; not working in Firefox 11/18/2011 1:41 AM Bakyaraj
Thanks @Zammer U saved my time... Simple workaround, just add a <centre> tag before that particular div... Great Man.
Thanq...

# re: text-align: center; not working in Firefox 11/23/2011 12:24 PM Ghanshyam
Thanks Mo!!!!, I was trying for r-aligning td and your solution worked for me well, since I did not want the text-align to "body". IE worked using the text-align specified on td while FF worked using the text-align specified on div.

.footer_container {
width: 800px;
text-align:-moz-right; /*this works for Firefox*/
}
#table-footer {
display: block; width: 100%; font-size:11px; font-weight: bold;
}
#table-footer td {
text-align: right; /*this works for IE but not Firefox*/
}

# re: text-align: center; not working in Firefox 10/19/2012 4:50 AM lolza
Thanks a lot for sharing.
Yet, I'm dismayed to find that 6 years later they (MF) havent done anything about this.

# re: text-align: center; not working in Firefox 5/7/2013 1:19 AM may loc nuoc
Firefox and Chorme css customers have different treatments are making it harder for the developers website

Post A Comment
Title:
Name:
Email:
Comment:
Verification: