html - 如何居中对齐文本？CSS

Question

我有这个例子:

http://jsfiddle.net/BRxKX/4477/

这是 HTML 代码:

    <div class="container-fluid">
    <div class="row">
     <div class="col-sm-4 col-md-12 col-lg-12 " style="font-size:17px;color:white;">
<p class="text-left">- onorarii fixe;<br>
– onorarii orare, <br>
– onorarii orare şi fixe;<br>
– onorarii periodice;<br>
– onorarii de succes, în funcţie de rezultatul sau serviciul furnizat.
</p>
<p></p></div>

    </div>

</div>

这是 CSS 代码:

.row
{
    background:blue;
    width:100%:
    color:white;

}

我文本中的每一行都有一行以“-”开头。如果我们应用 "text-align: center" 我的文本将对齐到中心但缩进将不会正确排列

我希望文本与现在完全一样，但与中心对齐你能帮我解决这个问题吗？

提前致谢!

Answer 1

一种方法是使用包装元素将文本设置为左对齐，然后您的实际文本可以只是一个 block 元素，宽度设置为看起来不错并且具有 auto 左右边距。

.text-left-align-center{
  display: block;
  text-align: left;
}
.text-left-align-center p{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%; /*whatever width is needed for your text */
}

<div class="text-left-align-center">
  <p>
    - onorarii fixe;<br>
    – onorarii orare, <br>
    – onorarii orare şi fixe;<br>
    – onorarii periodice;<br>
    – onorarii de succes, în funcţie de rezultatul sau serviciul furnizat.
  </p>
</div>