居中和對齊HTML文本的行

Question

我有一個可變長度的文本行中的div。現在，我有這樣的事情

<div id="container" style="width: 500px"> 
    <div>Text Line 1</div> 
    <div>Text Line 2 of different length</div> 
    <div>Text Line 3</div> 
</div> 

我可以text-align: center容器，但我想每行相對於它是真正爲中心的線路最長的調整左邊，而不是各行自身爲中心。

有沒有一種簡單的CSS方式來做到這一點...或者我應該使用表來解決這個問題嗎？

Answer 1

這應該工作：

<div id="container" style="width: 500px; text-align:center;"> 
    <div style="text-align:left;"> 
    <div>Text Line 1</div> 
    <div>Text Line 2 of different length</div> 
    <div>Text Line 3</div> 
    </div> 
</div> 

Answer 2

使用

<span> </span> 

和CSS

width:500px; 
text-align:center; 
position:absolute; 

Answer 3

你設置PIC或顏色div的背景是什麼？
或更好我說是你的div寬度重要嗎？
如果不是這也許解決方案可以解決你的問題：

<div id="someID" style="width: auto; text-align:left;"> 
<div>line 1</div> 
<div>line 2 is more longer</div> 
<div>line 3</div> 
</div> 

Answer 4

你的HTML：

<div id="container"> 
    <span> 
    <div>Text Line 1</div> 
    <div>Text Line 2 of different length</div> 
    <div>Text Line 3</div> 
    </span> 
</div> 

你的CSS：

#container { 
    width: 500px; 
    background: #eee; 
    text-align: center; 
    padding: 10px 0; 
} 

#container span { 
    display: inline-block; 
    background-color: #ccc; 
} 

#container span div { 
    text-align: left; 
} 
​ 

演示：http://jsfiddle.net/G6ABA/