我正在使用 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 使整个页面的标题居中(而不仅仅是在其所在的容器内)。
最佳答案
第一步:设置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< 将 和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>关于html - 如何在具有不同大小的子 div 的父 div 中居中文本(flexbox)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56763266/