如何在具有不同大小的子 div 的父 div 中居中文本（flexbox）答案

【问题标题】：How to center text within a parent div that has children divs of different sizes (flexbox)如何在具有不同大小的子 div 的父 div 中居中文本（flexbox）
【发布时间】：2019-11-07 20:04:24
【问题描述】：

我正在使用 Flexbox（我对它的使用还很陌生）创建一个网站。我想将站点名称和菜单下拉按钮放在同一行。我能够使用 Flexbox 成功地做到这一点，但是标题并没有以页面本身为中心。我知道这是因为菜单按钮的 flex-grow 为 1，而标题的 flex-grow 为 8。我这样做是为了间隔，但是现在标题不在整个页面的中心。

我尝试将标题 div 留空并在 div 之外写一个标题，但这会将文本放在父容器之前。

<body>
    <div class="parent container">
        <!--Navigational Bar-->
        <div class="Nav">
            <div id="Nav_Button">
                <p>Button</p>
            </div>
            <div id="Nav_Title">
                <h3>Super Snack Stadium</h3>
            </div>
        </div>
    </div>
</body>


.parent_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Containers within ".parent container"*/

.Nav {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order:1;
    /*Flex Parent Code*/
    display: flex;
    flex-direction: row;

}

/*--------Children of .Nav ---------*/

#Nav_Button {
    border: 1px solid black;
    /*Flex Child Code*/
    order: 1;
    flex-grow: 1;
}

#Nav_Title {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order: 2;
    flex-grow: 8;
}

如果可能的话，我希望能够使用 Flexbox 将整个页面（不仅仅是在其所在的容器内）的标题居中。

【问题讨论】：

您需要使用</div> 关闭您的<div class="parent container">。你试过吗？

标签： html css flexbox centering text-align

【解决方案1】：

第一步：设置Navposition:relative;

 .Nav {
   border: 1px solid black;
   text-align: center;
   /*Flex Child Code*/
   order:1;
  /*Flex Parent Code*/
  display: flex;
  flex-direction: row;
  position:relative;
}

第 2 步： 将 h3 设为绝对值。

h3 {
  position:absolute;
}

现在，h3 已从文档流中取出，但它可以根据最近的 relative 元素定位。

在这种情况下，我们将.Nav 设为relative。所以，h3 将使用.Nav 作为参考。由于.Nav 占据了整个屏幕宽度，我们只需使用left 和transform 将h3 定位到.Nav 的中心

第 3 步：

h3 {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

决赛：

.parent_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Containers within ".parent container"*/

.Nav {
   border: 1px solid black;
   text-align: center;
   /*Flex Child Code*/
   order:1;
  /*Flex Parent Code*/
  display: flex;
  flex-direction: row;
  position:relative;
}
/*--------Children of .Nav ---------*/

#Nav_Button {
    border: 1px solid black;
    /*Flex Child Code*/
    order: 1;
    flex-grow: 1;
}

#Nav_Title {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order: 2;
    flex-grow: 8;
}
h3 {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

<div class="Nav">
            <div id="Nav_Button"><p>Button</p></div>
            <div id="Nav_Title"><h3>Super Snack Stadium</h3></div>
        </div>

【讨论】：

【解决方案2】：

所以如果我理解正确，你已经在正确的轨道上，但你没有指定它应该居中。

#Nav_Button {

  display: flex;

  border: 1px solid black;
  /*Flex Child Code*/
  order: 1;
  flex-grow: 1;

  align-items: center;
  justify-content: center;
}

看到这里你使用了一个 div 并且这个 div 有默认的 display: block; https://www.w3schools.com/cssref/css_default_values.asp

这里是 align-items 和 justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

【讨论】：

【解决方案3】：


.parent_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Containers within ".parent container"*/

.Nav {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order:1;
    /*Flex Parent Code*/
    display: flex;
    flex-direction: row;
    position: relative;

}

/*--------Children of .Nav ---------*/

#Nav_Button {
    border: 1px solid black;
    /*Flex Child Code*/
    width: 300px;
}

#Nav_Title {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    position: absolute;
    width: 100%;
}
#Nav_Title h3 {
    margin: 14px;
}```

【讨论】：

【解决方案4】：

.parent_container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}


/*Containers within ".parent container"*/

.Nav {
  border: 1px solid black;
  text-align: center;
  /*Flex Child Code*/
  order: 1;
  /*Flex Parent Code*/
  display: flex;
  flex-direction: row;
  position: relative;
}

h3 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -5px;
}

/*--------Children of .Nav ---------*/

#Nav_Button {
  border: 1px solid black;
  /*Flex Child Code*/
  order: 1;
  flex-grow: 1;
}

#Nav_Title {
  border: 1px solid black;
  text-align: center;
  /*Flex Child Code*/
  order: 2;
  flex-grow: 8;
}

<div class="parent container">
  <!--Navigational Bar-->
  <div class="Nav">
    <div id="Nav_Button">
      <p>Button</p>
    </div>
    <div id="Nav_Title">
      <h3>Super Snack Stadium</h3>
    </div>
  </div>
</div>

【讨论】：