居中和对齐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/