Question

我有这个例子：

这是代码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

在CSS中，添加：

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

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

Answer 2

.row
{
    background:blue;
    width:100%:
    color:white;
    margin-left:30%;
    float:left;
}

始终使用CSS框模型进行文本对齐。
Float：left - ＆gt;即使浏览器宽度/高度增加或减少，也有助于将文本保持在中心位置。

http://jsfiddle.net/e8z2pb3p/

Answer 3

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

＆＃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;

如何居中对齐文本？CSS

3 个答案: