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

Question

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

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

table {
  margin: 0 auto;
}

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

---

我想知道的是如何在没有固定宽度的情况下做一个 block 。

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， block 级元素将填充父容器的宽度，因此它实际上是 width:100%并且文本将在左侧流动，留下无用的标记和未居中的元素。您可能想尝试 display: inline-block; . Firefox 可能会提示，但是 it's right .另外，尝试添加 border: solid red 1px;到 .my-centered-content 的 CSS DIV 以查看在您尝试这些操作时发生了什么。