如何居中左對齊文本？

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