Bootstrap 4 margin:auto 和 text-center 不居中我的段落

Question

我想在我的项目中居中一个段落，但我不能

我试过margin:0px auto; 和text-center功能，但它们不起作用

<div class="row text-center">
   <p>
Daha fazla bilgi edinmek için veya sorularınız için aşağıdaki iletişim formunu kullanarak bize ulaşabilirsiniz.<br>
Mutlaka 24 saat içinde size geri dönüş sağlanacaktır.
  </p>

</div>

和 CSS 代码：

.takim-content p {

    font-family: 'Roboto Slab', serif;
    font-size:16px;
    color:#777;
    margin:50px auto;   

}

截屏：

我为这些圈子和col-sm-6类使用了容器div

同样，我想拉近这些圆圈，并尝试使用相同的值padding-left padding-right ，但这导致响应式显示出现错误结果

Answer 1

您的文本居中对齐，您可以看到，因为第二行没有左对齐。 问题是包含文本的段落或 div 的宽度不正确。 根据您所需的视觉效果，有几种解决方案。

根据您的宽度来自何处，您应该能够将div和p的宽度设置为 100%：

div {
  width: 100%;
}

或者

p {
  width: 100%;
}

如果你想让元素居中，看起来你已经有了margin: 50px auto; 在p 。 尝试在 div 上设置它：

div {
  margin: 0 auto;
}

注意：确保将这些修复添加到唯一的类或 id 中，这样您就不会将它们添加到div 、 p或 bootstrap 类（如row每个实例中。

Answer 2

这对我有用

<div class="row justify-content-md-center"> your paragraph </div>

Answer 3

只需在具有类行的 div 中添加 justify-content-center

Answer 4

要解决您的第一个问题，只需使用justify-content-center

<div class="row justify-content-center">
   <p>
Daha fazla bilgi edinmek için veya sorularınız için aşağıdaki iletişim formunu kullanarak bize ulaşabilirsiniz.<br>
Mutlaka 24 saat içinde size geri dönüş sağlanacaktır.
  </p>
</div>

参考： https : //getbootstrap.com/docs/4.3/utilities/flex/

解决你的第二个问题。 您可以对第一个圆使用float-right ，对第二个圆使用float-left 。

<div class="row">
   <div class="col-md-6"><span class="circle float-right"></span></div>
   <div class="col-md-6"><span class="circle float-left"></span></div>
</div>