5

我更喜欢使用基于 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>

但这似乎不太正确。我不是要对齐文本，而是要对齐内容。此外，这似乎对封闭元素的文本对齐有影响，需要调整才能修复。我不明白的一件事是：为什么没有 float:center 样式？似乎这将是最好的解决方案。希望我遗漏了一些东西，并且有一种完美的 CSS 方法可以做到这一点。

4

6 回答 6

10

你是对的，text-align用于对齐文本。实际上，只有 Internet Explorer 可以让您将文本以外的任何内容居中。任何其他浏览器都可以正确处理这个问题，并且不会让块元素受到text-align.

要使用 css 居中块元素，您可以margin: 0 auto;按照 Joe Philllips 的建议使用。尽管您根本不需要保留桌子。

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

于 2009-04-06T19:07:08.047 回答
5

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

问题是你必须设置一个固定的宽度。

编辑： 再次查看问题后，我建议完全废弃该表。只需<div style="width: 200px; margin: 0 auto;>按照我的建议使用 a 即可，不需要表格。

于 2009-04-06T18:43:22.597 回答
3

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

于 2009-04-06T19:11:32.247 回答
1

你在哪里发现自己经常这样做？对我来说 - 我经常尝试将网站的整个设计置于中心位置，所以我通常这样做：

<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元素内）。

于 2009-04-06T18:58:17.663 回答
1

用于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>
于 2012-10-20T22:04:34.413 回答
0

d03boy 的答案是正确的以正确的方式将事物居中。

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

于 2009-04-06T18:50:33.500 回答