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>