Css 如何沿轴对齐文本？

我想让我的左栏向右对齐，右栏向左对齐，以便它们沿着中心轴对齐，如下所示：

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

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

HTML位于

s中，如下所示：

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

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

2013年1月16日这里有一行文字。

我一直在尝试使用

行{display:table row；}

和

行{display:table cell；}

来实现这一点，但它似乎不起作用

试试这个

<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> 

2013年1月16日
这是一行文字。

---

你觉得怎么样D

我会和斯潘呆在一起：

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;
}

<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>

HTML:

    #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;
}

<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>

Lorem Ipsum

多洛·希特·阿梅特

---

请参见此处的操作：

您可以使用display属性的表格单元格值

---

请参见示例

如果您的线条具有固定宽度，是否可以我想是的。我想这就是这里缺少的。