CSS适当的中心内容方式

Question

我更喜欢使用基于CSS的设计,但作为更多的后端编码器,我的CSS技能有点弱.当我参与布局时,我倾向于依赖于基于表格的格式化,因为我的思想已被多年的基于表格的滥用所扭曲.有一个特别的问题,我总是绊倒.什么是最好的CSS替代品:

<table width="100%">
    <tr>
        <td align="center">
            content goes here
        </td>
    </tr>
</table>

我有时会用:

<div style="width:100%; text-align:center">content</div>

但这似乎不太正确.我不是要调整文本,我正在尝试调整内容.此外,这似乎对封闭元素的文本对齐有影响,这需要调整以修复.我没有得到的一件事是:为什么不存在浮动:中心风格？看起来这将是最好的解决方案.希望我错过了一些东西,并且有一种完美的CSS方式来做到这一点.

Answer 1

你是对的,text-align用于对齐文本.实际上只有Internet Explorer才能让您将文本以外的任何内容集中在一起.任何其他浏览器都能正确处理此问题,并且不会让块元素受到影响text-align.

要使用css对块元素进行居中margin: 0 auto;,就像Joe Philllips建议的那样.虽然您根本不需要保留表格.

没有的原因float: center;是浮动是为了将元素(通常是图像)放置在左侧或右侧,并且文本在它们周围流动.在这种情况下,在中心浮动某些东西是没有意义的,因为这意味着文本必须在元素的两侧流动.

Answer 2

我建议在<div>你的<td>设置中添加一个样式属性style="width: 200px; margin: 0 auto;"

问题是您必须设置固定宽度.

编辑: 再次查看问题后,我建议完全删除表格.只需<div style="width: 200px; margin: 0 auto;>按照我的建议使用,不需要表格.