我正在使用Flexbox创建一个网站(我在使用它时还很陌生)。我想将站点名称和菜单下拉按钮放在同一行。我可以通过Flexbox成功完成此操作,但是标题不在页面本身的中心。我知道这是因为菜单按钮的flex-grow为1,而标题的flex-grow为8。我这样做是为了间隔,但是现在Title不在整个页面的中心。
我尝试将标题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将整个页面的标题居中(而不仅仅是在其所在的容器内)。
答案 0 :(得分:0)
因此,如果我对您的理解正确,那么您已经处在正确的轨道上,但是您没有指定它应该居中。
#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
这里是align-items和justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
答案 1 :(得分:0)
步骤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
占据了整个屏幕宽度,因此我们所要做的就是使用h3
和.Nav
left
定位到transform
的中心
第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 :(得分:0)
.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;
}```
答案 3 :(得分:0)
.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>