Центрирование и выравнивание строк текста 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

вы устанавливаете ПОС или цвета фона 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/