css - 将元素放置在父元素的中间但保持文本左对齐

Question

如何将一个地方和元素放在父元素的中间。但我仍然希望文本向左对齐。摆弄与中间对齐的文本:

.align-text{
  text-align: center;  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<span class="col-xs-4">
         <div class="align-text">
             <div><h3>Sample</h3></div>
             <div>text</div>
             <div>address</div>
         </div>
    </span>
    <span class="col-xs-4">
         <div class="align-text">
             <div><h3>Sample</h3></div>
             <div>text</div>
             <div>address</div>
         </div>
    </span>
    <span class="col-xs-4">
         <div class="align-text">
             <div><h3>Sample</h3></div>
             <div>text</div>
             <div>address</div>
         </div>
    </span>

一切正常，我只希望文本向左对齐而不是中间对齐。

Answer 1

您需要的是将文本容器在其父容器中居中，然后左对齐其内容。

在文本容器中使用 display: inline-block 并使用 text-align: center 使其父级居中。

然后使用 text-align: left 将文本内容左对齐:

 <section class="col-xs-4">
     <div class="align-text">
         <div><h3>Sample</h3></div>
         <div>text</div>
         <div>address</div>
     </div>
</section>
<section class="col-xs-4">
     <div class="align-text">
         <div><h3>Sample</h3></div>
         <div>text</div>
         <div>address</div>
     </div>
</section>
<section class="col-xs-4">
     <div class="align-text">
         <div><h3>Sample</h3></div>
         <div>text</div>
         <div>address</div>
     </div>
</section>

section
{
    text-align: center;
}

section > div 
{
    display: inline-block;
    text-align: left;
}

https://jsfiddle.net/DTcHh/6051/