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>容器如下 ( 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;
}