<分区>
<分区>
如何使绝对定位的 flex 容器的子元素居中？
容器已经设置为 justify-content:center，但由于 child 是绝对定位的，这不会影响它，它也不会居中。
Logo (手头的问题是 Logo )被“绝对定位”以便能够应用 z-index，所以我可以让它可点击(在它会在几个层中丢失之前我不会'看不到它或无法单击它)。
我附上图片来解释我的观点(请多多包涵，因为我无法嵌入图片 - stackoverflow 因果关系不够)。相关代码如下。
float: left to implement the design 这是我试过的:
显示: block ； margin-left: auto; margin-right: auto;但这没有任何区别如何在移动 View 中将 Logo 置于导航栏上方的中央？对我放轻松，我是初学者 :-)
Relevant HTML:
<header class="masthead__navigation mb-auto d-flex w-100 p-3 mx-auto flex-column">
<div class="inner">
<a class="inner-masthead" href="#"><img src="assets/images/logo.jpg" style="max-height:40px; width:auto;"></a>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Blog</a>
<a class="nav-link" href="#">Join Newsletter</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
Relevant CSS:
@media (min-width:768px) {
.masthead__navigation {
padding-right: 2.5rem !important;
padding-left: 4rem !important
}
.nav-masthead .nav-link {
color: #262626 !important;
color: rgba(26, 26, 26, .5) !important;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(26, 26, 26, .5) !important;
}
.nav-masthead .active {
color: #000 !important;
border-bottom-color: #000 !important;
}
}
.masthead__navigation {
margin-bottom: 2rem;
padding-bottom: 0 !important;
width: 100vw !important;
position: absolute !important
}
.inner-masthead {
margin-bottom: 0;
position: absolute !important;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 4 !important
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: #999;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
z-index: 4 !important
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .5);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.inner-masthead {
float: left;
}
.nav-masthead {
float: right;
}
}
最佳答案
For a positioned box (that is, one with any position other than static), the z-index property specifies: 1)The stack level of the box in the current stacking context. 2)Whether the box establishes a local stacking context.
根据 MDN - z-index , z-index 适用于每个位置不是静态的元素。也许您应该尝试使用 position:relative 或类似的方法，它不会将元素从其父项中弹出。
关于html - flex 容器的绝对定位子容器不参与 flex 布局，如何使元素居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51518779/