【问题标题】: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: centerjustify-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 应用到.contentalign-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>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-01-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-10-26
        • 2016-03-21
        • 2018-03-16
        • 2017-05-17
        相关资源
        最近更新 更多