text-align: center; not working in Firefox

broken · 发表于 2011-7-24 09:52

今天做项目时,碰到div下的表格内容不能居中显示。网上查了论坛，发现一个讨论的帖子。(http://geekswithblogs.net/timh/archive/2006/04/19/75606.aspx)。现分享如下：

一、提出问题:
下面这段代码.
Html代码
<style type="text/css">
.container{
  text-align: center;
  border: solid 1px blue;
}
</style>

<div class=container>
<table>
      <tr><td>Text</td></tr>
</table>
</div>

<style type="text/css">
.container{
  text-align: center;
  border: solid 1px blue;
}
</style>

<div class=container>
<table>
<tr><td>Text</td></tr>
</table>
</div> 在IE下"Text"居中显示,FF下"Text"靠左显示.

二、解决问题:
方案1：

Html代码
<style type="text/css">
.container{
  text-align: center;
  border: solid 1px blue;
}

table {
margin-left:auto;
margin-right:auto;
}
</style>

<div class=container>
<table>
      <tr><td>Text</td></tr>
</table>
</div>

<style type="text/css">
.container{
  text-align: center;
  border: solid 1px blue;
}

table {
margin-left:auto;
margin-right:auto;
}
</style>

<div class=container>
<table>
<tr><td>Text</td></tr>
</table>
</div>
方案2：

Html代码
<style type="text/css">
.container{
  text-align:-moz-center; /*FF*/
  #text-align: center; /*IE */
  border: solid 1px blue;
}
</style>

<div class=container>
<table>
      <tr><td>Text</td></tr>
</table>
</div>

<style type="text/css">
.container{
  text-align:-moz-center; /*FF*/
  #text-align: center; /*IE */
  border: solid 1px blue;
}
</style>

<div class=container>
<table>
<tr><td>Text</td></tr>
</table>
</div>
方案3：

Html代码
<style type="text/css">
.container{
  border: solid 1px blue;
}
</style>

<center>
<div class=container>
<table>
      <tr><td>Text</td></tr>
</table>
</div>
</center>

<style type="text/css">
.container{
  border: solid 1px blue;
}
</style>

<center>
<div class=container>
<table>
<tr><td>Text</td></tr>
</table>
</div>
</center>

三、论道摘录:

   1.
写道
# 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 :)

   2.
写道
# 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

3.
写道
# 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

叫我小乖 · 发表于 2011-7-24 09:52

put a table in a div which feeling strangeness

if you only want make the elements abover the div(which means the table) you can do just like this

<table align='center'>

</table>

this must can be work!

have a try!

曾经的小孩 · 发表于 2011-7-24 09:52

求LS MM联系方式...

哈哈...

芷馨 · 发表于 2011-7-24 09:53

lz根本没搞懂问题原因

紫衿 · 发表于 2011-7-24 09:53

askjsp
put a table in a div which feeling strangeness

if you only want make the elements abover the div(which means the table) you can do just like this

<table align='center'>

</table>

this must can be work!

have a try!

首先,thanks

put a table in a div which feeling strangeness ??? div用于布局,table用于显示数据,有什么问题吗？

<table align='center'>

</table> 这样是可以的，但是我是从布局层面来考虑问题的。

江南枫 · 发表于 2011-7-24 09:53

sohighthesky
lz根本没搞懂问题原因

能说说问题的原因是什么吗? 求点化

fossil · 发表于 2011-7-24 09:53

你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{
margin: auto;
border: solid 1px blue;
}

醉倚西风 · 发表于 2011-7-24 09:53

wangking717
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{
margin: auto;
border: solid 1px blue;
}

ff表示鸭梨很大

叫我小乖 · 发表于 2011-7-24 09:53

Html代码
<html>
<head>
<style>
body { text-align: center; margin: 0; padding: 0; }
/* margin，padding进行reset */
#wrapper {
  margin:0px auto;
  text-align: left;
  width: 600px;
  height: 700px;
  background: blue;
}
/* 1. 还原成默认的left  2. 如果不加宽度居中没有意义。 */
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>

<html>
<head>
<style>
body { text-align: center; margin: 0; padding: 0; }
/* margin，padding进行reset */
#wrapper {
  margin:0px auto;
  text-align: left;
  width: 600px;
  height: 700px;
  background: blue;
}
/* 1. 还原成默认的left  2. 如果不加宽度居中没有意义。 */
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>

郁闷小男人 · 发表于 2011-7-24 09:54

这里有详细解释：http://www.w3help.org/zh-cn/causes/RT8003

帐号		自动登录	找回密码
密码			成为会员