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>中，如下所示：

<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

我会留在span：

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

您可以使用display属性的table-cell值。

参见示例http://jsbin.com/eYOWaYA/1/edit

如何沿轴对齐文本？

3 个答案: