|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (13) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-09-16
今天做项目时,碰到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
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：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! |
| 返回顶楼 | |
|
发表时间：2010-09-19
求LS MM联系方式...
哈哈... |
| 返回顶楼 | |
|
发表时间：2010-09-21
lz根本没搞懂问题原因
|
| 返回顶楼 | |
|
发表时间：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> 这样是可以的，但是我是从布局层面来考虑问题的。 |
| 返回顶楼 | |
|
发表时间：2010-09-21
sohighthesky 写道 lz根本没搞懂问题原因
能说说问题的原因是什么吗? 求点化 |
| 返回顶楼 | |
|
发表时间：2010-09-21
最后修改：2010-09-21
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;} .container{ margin: auto; border: solid 1px blue; } |
| 返回顶楼 | |
|
发表时间：2010-09-21
wangking717 写道 你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;} .container{ margin: auto; border: solid 1px blue; } ff表示鸭梨很大 |
| 返回顶楼 | |
|
发表时间：2010-09-23
最后修改：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>
|
| 返回顶楼 | |
|
发表时间：2010-09-23
这里有详细解释：http://www.w3help.org/zh-cn/causes/RT8003
|
| 返回顶楼 | |
