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>

我的意思是，证明内容中心

区别在于：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>

Answer 2

文本中心

text-align CSS属性指定嵌入式或表格单元格框的水平对齐方式，这意味着它像垂直对齐方式一样工作，但在水平方向上。 -MDN

.text-center {
  text-align: center !important;
}

text-center将内联和表格单元格元素对齐到您用于其元素的中心。它不会更改 block 元素的对齐方式。容器元素必须具有width属性，这意味着您不能将其用于inline元素。

justify-content-center

这些物品沿着对齐轴线朝着对齐容器的中心彼此齐平包装。

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

要使其正常工作，您还需要使用d-flex。它将用于元素的所有内容（内嵌，块和 flex ）对齐在元素中心。默认情况下，如果您尚未更改元素的flex-direction，则元素的内容将水平居中。

您可能会发现这些链接很有用。

Bootstrap 4：文本中心和证明内容中心之间的区别

2 个答案:

文本中心

justify-content-center