当 flexbox 设置为对齐并对齐所有项目为中心时，为什么文本不居中？ [复制]答案

【问题标题】：When flexbox is set to align and justify all items as center, why is the text not centered? [duplicate]当 flexbox 设置为对齐并对齐所有项目为中心时，为什么文本不居中？ [复制]
【发布时间】：2018-02-11 11:05:15
【问题描述】：

我是 flexbox 的新手。我的代码目标是将容器 div 中的文本垂直和水平居中。

为什么文本没有居中对齐？我需要添加text-align:center 吗？ flexbox 不应该为我这样做吗？

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
</div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您在 .container 上设置 flex，其唯一的孩子是 .content，它是居中的。

应用 text-align: center 应该将该 div 内的文本对齐到中心。

.content 中的 div 仍然是块级元素，文本左对齐。在容器上设置 flex 不会影响子项的子项。

为清晰起见添加了边框和背景。

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  background-color: blue;
  padding: 24px;
}

.content > div {
  border: 1px solid red;
  background-color: pink;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
  </div>
</div>

【讨论】：

我的问题是我是否需要专门应用“文本对齐”不应该 flex-box 居中，居中文本？或者当使用 flexbox 使文本居中时，是否还必须使用 text-align: center ？使文本完全居中？
在答案中添加了一个 sn-p 以尝试说明更多信息。这是否有助于解释为什么您仍需要指定文本对齐方式？

【解决方案2】：

Flexbox 在这里完成了它的工作。您将 text-align 设置为默认值，left。如果你想让它居中，那么是的，你将不得不使用 text-align: center;在包含您想要居中的文本的 div 上。

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
  text-align: center;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
</div>
</div>

【讨论】：

【解决方案3】：

Flex 属性仅适用于 flex 行和 flex 项目，而不适用于 flex 项目的内部元素。

这里你的弹性容器是.container，弹性项目是.content...align-items: center和justify-content: center只适用于弹性项目。

您需要使用text-align:center 将文本居中对齐

堆栈片段

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
  text-align: center;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
  </div>
</div>

另一种解决方案是将display:flex 应用到.content 和align-items:center...您将了解 flex 的概念...

堆栈片段

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
  </div>
</div>

【讨论】：