如果您事先不知道其宽度,请将一个内容块居中

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;在.my-centered-contentDIV 的CSS中添加一个,看看在尝试这些事情时发生了什么.