如何将具有不同大小的孩子Div(FlexBox)的父亲Div中心居中

我正在用flexbox创建一个站点(我在使用时很新(。我想将网站的名称和菜单下拉按钮放在同一行上。我能够通过FlexBox成功地完成此操作，但是标题并未集中在页面本身上。我知道这是因为菜单按钮的弹性增长为1，而标题的弹性增长为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;
}

如果可能

步骤1：设置Nav position: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>

因此，如果我正确理解您，您已经在正确的轨道上，但是您没有指定它应该集中。

#Nav_Button {
  display: flex;
  border: 1px solid black;
  /*Flex Child Code*/
  order: 1;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

请参见您使用DIV，此DIV具有默认显示：block;https://www.w3schools.com/cssref/css_default_values.asp

以及在这里进行对齐和辩护https://develveper.mozilla.org/en-us/docs/web/css/css_flexible_box_box_layout/aligning_items_in_a_flex_flex_container


.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;
}```

.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>

相关内容

最新更新

热门标签：