如何沿軸對齊文本？

Question

我想有我左欄右對齊，和我的右列左對齊，讓他們排隊沿中心軸，像這樣：

16 January 2013 | Here is a line of text. 
26 December 2013 | Another line of text here. 
     4 May 2011 | Here is something else. 

的HTML是<span> S，這樣的：

<div class="line"> 
    <span class="date">16 January 2013</span> <span class="text">Here is a line of text.</span> 
</div> 

我一直在試圖與.line { display: table-row; }和.line span { display: table-cell; }要做到這一點，但它似乎並沒有工作。

Answer 1

試試這個..

<div class="line"> 
    <div style="width:50%;float:left;text-align:right;" class="date">16 January 2013</div>  
    <div style="width:50%;float:left;text-align:left;" class="text">Here is a line of text.</div> 
</div> 

DIV-S你合適嗎？ ：d

Answer 2

我會陪着跨度：

CSS：

#container 
{ 
    display: table; 
} 

.left 
{ 
    margin-left: 10px; 
    width: 200px; 
    float: right; 
    text-align: left; 
} 

.right 
{ 
    margin-right: 10px; 
    width: 200px; 
    text-align: right; 
    float: left; 
} 

HTML：

<div id='container'> 
    <span class='left'>Lorem</span> <span class='right'>Ipsum</span><br/> 
    <span class='left'>dolor sit</span> <span class='right'>amet</span> 
</div> 

在這裏看到的動作：http://jsfiddle.net/AyhyZ/1/

Answer 3

你可以使用顯示屬性的表格單元格值。

看到的例子http://jsbin.com/eYOWaYA/1/edit