如何将左对齐文本居中？

Question

这是丑陋的代码：

<table style="margin: auto"><tr><td>
Name: Fred Flintstone<br>
Home: Bedrock<br>
Favorite activity: Going to the drive-in and eating a brontosaurus burger!
</td></tr></table>

我的目标是将一个左对齐文本居中。我知道如何做到这一点的唯一方法是尝试测量/猜测必要的包含div的宽度。 “好吧，也许400px。不，这会导致它换行......让我们试试450。”

我真正需要的是一些代码来创建一个容器，允许我在其中放置任何文本并让它自己调整到该宽度。

Answer 1

您还可以使用一些<div>容器，如下所示（example fiddle）：

<div id="container">
    <div id="content">
      Name: Fred Flintstone<br>
      Home: Bedrock<br>
      Favorite activity: Going to the drive-in and eating a brontosaurus burger!
    </div>
</div>

和这个CSS：

#container {
    text-align: center;
}

#content {
    display: inline-block;
    text-align: left;
}