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将块元素居中，就像Joe Philllips建议的那样使用margin: 0 auto;。虽然你根本不需要保留表格。

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

Answer 2

我建议将<div>放入<td>并将样式属性设置为style="width: 200px; margin: 0 auto;"

要抓住的是你必须设定一个固定的宽度。

修改在再次查看问题之后，我建议完全废弃该表。只需按照我的建议使用<div style="width: 200px; margin: 0 auto;>即可，无需使用表格。

Answer 3

这是使用CSS进行居中的好资源。
http://www.w3.org/Style/Examples/007/center
这演示了如何居中文本，块，图像以及如何将它们垂直居中。

Answer 4

你发现自己常常在这做什么？对我来说 - 我经常试图将整个网站的设计集中在一起，所以我通常会这样做：

<html>
  <body>
  <div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
  </body>
</html>


body {text-align:center;}
#wrapper {margin:0 auto; text-align:left; width:980px;}

这将使整个设计在页面上以980px的宽度居中，同时仍然保持所有文本左对齐（只要该文本在#wrapper元素内）。

Answer 5

使用display:inline-block启用text-align:center并在没有固定宽度的情况下居中内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Centering</title>

  <style type="text/css">
  .container { text-align:center; }

  /* Percentage width */
  .wrapper { width: 99%; }

  /* Use inline-block for wrapper */
  .wrapper { display: inline-block; }

  /* Use inline for content */
  .content { display:inline; }
  </style> 

</head>
<body>
  <div class="container">
    <div class="content">
        <div class="wrapper">
            <div>abc</div>
            <div>xyz</div>
        </div>
    </div>
  </div>
</body>
</html>

Answer 6

d03boy的答案对于正确的中心方式是正确的。

要回答你的其他评论，“此外，这似乎对封闭元素的文本对齐有影响，这需要调整才能修复。”这就是CSS的工作原理，在元素上设置属性会影响它的所有子元素，除非属性被其中一个覆盖（当然，假设属性是inherited属性）。

CSS适当的中心内容方式

6 个答案: