css - 如何使左对齐文本居中？

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 的宽度。“好吧，也许是 400 像素。不，这会导致它换行……让我们试试 450。”

我真正需要的是一些代码来创建一个容器，该容器允许我将任何文本放入其中并将其自身调整为该宽度。

Answer 1

<div>您还可以按如下方式使用一些容器（例如小提琴）：

<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;
}