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するPICや色を設定するのですか？
以上私はあなたの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/