如何居中对齐文本?CSS

时间:2015-04-08 23:26:20

标签: html css

我有这个例子:

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",我的文字将与中心对齐,但缩进将无法正确排列

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

提前致谢!

3 个答案:

答案 0 :(得分:0)

在CSS中,添加:

.row p {
    margin-left: 40%;
}

并根据自己的喜好调整边距。 40%是关于中心的,但你可以改变它。此外,无需更改您的HTML。这是一个demo

答案 1 :(得分:0)

.row
{
    background:blue;
    width:100%:
    color:white;
    margin-left:30%;
    float:left;
}
  • 始终使用CSS框模型进行文本对齐。
  • Float:left - &gt;即使浏览器宽度/高度增加或减少,也有助于将文本保持在中心位置。

http://jsfiddle.net/e8z2pb3p/

答案 2 :(得分:0)

一种方法是使用一个包装元素来设置左边的文本对齐,然后你的实际文本可以只是一个块元素,其宽度设置为看起来很好并且左右边距为auto

&#13;
&#13;
.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 */
}
&#13;
<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>
&#13;
&#13;
&#13;