css - Bootstrap 4 : Difference between text-center and justify-content-center

Question

text-center 和 justify-content-center 似乎都在做同样的事情 - 居中文本。但是有什么区别呢？

Answer 1

Bootstrap 4 不支持 justify-text-center。

来源:Text

---

也许您正在寻找这样的东西:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

<p class="text-center">Center aligned text on all viewport sizes.</p>

---

I meant, justify-content-center

区别在于:justify-content-*用于改变flex项的对齐方式。

如果 div 没有属性 display: flex。它似乎不起作用。而 text-center 不需要属性 display: flex。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <div style="background-color: red;">Item 1</div>
  <div style="background-color: yellow;">Item 2</div>
  <div style="background-color: blue;">Item 3</div>
</div>

<hr />

<div class="justify-content-center">
  <div style="background-color: red;">Item 1</div>
  <div style="background-color: yellow;">Item 2</div>
  <div style="background-color: blue;">Item 3</div>
</div>