`

text-align: center; not working in Firefox

    博客分类：
  • css
FirefoxIECSSXHTML.net 
阅读更多

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

 

一、提出问题:

    下面这段代码.

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

    

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

    

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

    

<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

 

   

分享到：
| 新学一招, 判断一个js对象是不是数组
评论
14 楼 aokunsang 2010-09-29  
ls的头像确实经典啊、我是来看你头像的。
13 楼 driftcloudy 2010-09-25  
LZ确实没搞明白。。。
text-align:center仅仅是让文本居中，但是在IE的奇异模式下，会误认为text-align是一切居中
12 楼 caiceclb 2010-09-25  
text-align:center; 是文本居中，或者说是内联元素的居中，块级不受此影响，有时会这样写是为了兼容IE5-的版本
11 楼 caiceclb 2010-09-25  
设置table {width:100%}
10 楼 wangking717 2010-09-24  
明天的昨天 写道
wangking717 写道
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{  
  margin: auto;  
  border: solid 1px blue;  
}


ff表示鸭梨很大


margin: auto; 在FF里可以局中，但是IE不能，所以可以在BODY标签里设置TEXT-ALIGIN让起局中，我测试过，不过任何IE版本以及FF都兼容。
9 楼 pfans 2010-09-23  
这里有详细解释：http://www.w3help.org/zh-cn/causes/RT8003
8 楼 wangchao719 2010-09-23   
<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>
7 楼 明天的昨天 2010-09-21  
wangking717 写道
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{  
  margin: auto;  
  border: solid 1px blue;  
}


ff表示鸭梨很大
6 楼 wangking717 2010-09-21  
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{  
  margin: auto;  
  border: solid 1px blue;  
}
5 楼 明天的昨天 2010-09-21  
sohighthesky 写道
lz根本没搞懂问题原因

能说说问题的原因是什么吗? 求点化
4 楼 明天的昨天 2010-09-21  
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>    这样是可以的，但是我是从布局层面来考虑问题的。
3 楼 sohighthesky 2010-09-21  
lz根本没搞懂问题原因
2 楼 smildlzj 2010-09-19  
求LS MM联系方式...

哈哈...
1 楼 askjsp 2010-09-17  
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!
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    IE7下当position:fixed遇到text-align:center的解决方法

    具体来说，如果容器元素使用text-align:center，那么fixed定位的元素可能会被解析为只有一半宽度显示，而在其他现代浏览器（如Firefox和Chrome）中则能正常显示。 为了解决这个问题，可以采用以下方法： 1. 在...

    在ie7下css居中样式text-align:center;偏左问题解决方法

    在设计网页时，居中对齐是一种常见的需求，`text-align:center;` 是CSS中用于实现文本水平居中的一个属性。然而，当在Internet Explorer 7（简称IE7）这个较旧的浏览器版本中使用该样式时，可能会遇到一个问题：文本...

    text-align:justify实现文本两端对齐 兼容IE

    通常，`text-align: left` 会使文本左对齐，`text-align: right` 使文本右对齐，而 `text-align: center` 则将文本居中。然而，`justify` 提供了一种更专业且对称的文本排列效果，尤其适合长段落的阅读体验。 在IE...

    margin:0 auto与text-align:center的基本概念及区别介绍

    1.text-align: 属性规定元素中的文本的水平对齐方式; 　该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式; 　一般情况下设置文本对齐方式的时使用此属性。支持值 justify。 　Example: div...

    使用text-align:justify实现两端对齐一例

    在Firefox浏览器中，中文文本可以通过加入空格来实现分割，这样可以使文本两端对齐。然而，Opera浏览器则不会在中文文本中增加额外的空格来实现对齐，这可能会导致在某些情况下，文本对齐的效果并不理想。Safari...

    网页制作代码+课程总结

    text-align:center; float:left; width:90px; } #daohang a{ background-image:url(images/bj01.jpg); display:block; margin:0px; padding-top:10px; padding-right:0px; padding-bottom:13px; padding-...

    DIV CSS常用的网页布局代码

    text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列以下是引用片段：body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-...

    支持.net 心语聊天室系统

    text-align: center; width: 160px; color: #000000; font-family: 宋体; font-size: 10px; font-weight: bold; background-image: url(image/leftmenubg.gif); line-height: 21px; } .contentBg { ...

    谷歌浏览器 div 水平对齐

    text-align:center; Multi-line, vertical-align:middle; text-align:center; Multi-line, vertical-align:middle; text-align:center; ``` CSS 部分： ```css div.table { display: table; ...

    H5 jQuery网站右侧悬浮楼层滚动导航代码.zip

    代码片段： ... -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  color: rgba(0,0,0,0.5);  font-size: 2rem;  min-height: 100%;  height: 100vh; }

    让IE也支持margin居中告别text-align:center

    谨以此篇献给那些和我一样使用 myeclipse 开发，为了在 IE 下居中一直使用 text-align:center 居中的童鞋。 废话不多说，解决办法是在 DOCTYPE 中加上 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd，...

    html居中问题

    - **其他浏览器**：在Firefox、Chrome、Safari等浏览器中，`text-align:center`仅作用于行内内容上。 这种差异会导致页面在不同浏览器下的显示效果不一致，特别是在需要实现块级元素居中对齐的情况下。 #### 四、...

    CSS常用属性大全.pdf

    `、`text-align: center;`、`text-align: justify;` 二、CSS 边框空白 * `padding-top`: 设置上边框留空白，例如 `padding-top: 10px;` * `padding-right`: 设置右边框留空白，例如 `padding-right: 10px;` * `...

    网页特效代码(用户根据自己的选择切换用户登陆界面等特效）

    text-align: center} .out2 { text-align: center} .in,.out2{ font-size: 9pt; color: #66DDDD;border-width:1px;border-style:solid;border-color:0070b0 0090c0 0090c0 0070b0;background:0078b8;cursor:default...

    text-algin:justify实现文本两端对齐方法小结

    最近在写页面的时候遇到了一个问题—当行文本双端对齐，大家都知道CSS属性中有一个“text-align:justify”，但是这个属性使用的时候，要求还是挺多的，尤其是要实现单行文本双端对齐。这篇文章就给大家分享了text-...

Magicbox
Global site tag (gtag.js) - Google Analytics