html - 当您事先不知道其宽度时，将内容块居中

Question

经过大量尝试和搜索，我从未找到使用 CSS2 的令人满意的方法。

实现它的一种简单方法是将其包装成一个方便<table>的，如下面的示例所示。您知道如何避免表格布局并避免古怪的技巧吗？

table {
  margin: 0 auto;
}

<table>
  <tr>
    <td>test<br/>test</td>
  </tr>
</table>

---

我想知道的是如何在没有固定宽度和块的情况下做到这一点。

Answer 1

@Jason，是的，<center>有效。美好的时光。不过，我会提出以下建议：

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}

<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

编辑@Santi，块级元素将填充父容器的宽度，因此它实际上是width:100%并且文本将在左侧流动，给您留下无用的标记和未居中的元素。你可能想试试display: inline-block;。Firefox 可能会抱怨，但这是正确的。此外，尝试border: solid red 1px;在 DIV 的 CSS 中添加一个，.my-centered-content以查看在尝试这些操作时发生了什么。

Answer 2

这将是最蹩脚的答案，但它有效：

使用已弃用的 <center> 标签。

:P

我告诉过你那会很蹩脚的。但是，就像我说的，它有效！

*不寒而栗*

Answer 3

我认为如果您使用 <div> 而不是 <table>，您的示例也可以正常工作。唯一的区别是 <table> 中的文本也是居中的。如果你也想要，只需添加 text-align: center; 规则。

要记住的另一件事是 <div> 默认情况下会填满所有可用的水平空间。如果您不确定它的开始和结束位置，请在其上添加边框。

Answer 4

以下工作足够好。注意位置，以及auto的使用

<div style="border: 1px solid black; 
            width: 300px; 
            height: 300px;">
            <div style="width: 150px; 
                        height: 150px; 
                        background-color: blue;
                        position: relative;
                        left: auto;
                        right: auto;
                        margin-right: auto;
                        margin-left: auto;">
             </div>
</div>

注意：不确定它是否适用于 IE。

Answer 5

#wrapper {
  width: 100%;
  border: 1px solid #333;
}
#content {
  width: 200px;
  background: #0f0;
}

<div id="wrapper" align="center">
  <div id="content" align="left"> Content Here </div>
</div>

Answer 6

在 FF3 中，您可以：

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

这样做的好处是可以使用任何最符合语义的元素（如果合适的话，用更好的东西替换 div），但缺点是它在 IE 中失败（grr ...）

除此之外，在不设置宽度的情况下，最好的办法是使用 javascript 来精确定位左侧边缘。不过，我不确定您是否会将其归类为“古怪的把戏”。

当然，这真的取决于你想做什么。给定您的简单测试用例，带有 text-align: center 的 div 将具有完全相同的效果。