我有以下菜单(.logo
和 .socials
由 JS 放在里面)我需要 .logo
总是在页面中间有其他元素同样包裹。
<ul class="menu">
<li><a href="/">Homepage</a></li>
<li><a href="/contact/">Contact</a></li>
<li><a href="/documentary/">Documentary</a></li>
<div class="logo"></div>
<li><a href="/stories/">Stories</a></li>
<li><a href="/weddings/">Weddings</a></li>
<div class="socials">
<a href="https://www.instagram.com"><i class="sprite-instagram">i</i></a>
<a href="https://www.facebook.com"><i class="sprite-email">f</i></a>
</div>
</ul>
使用 CSS 居中元素,但我不知道如何将 .logo
放在中间:
.menu {
bottom: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
position: relative;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
如果你想看一看,这里是 fiddle :https://jsfiddle.net/kybernaut/134L25vc/1/
最佳答案
您正在使用一个 flex 容器,它使用空间分布来定位元素。
为了使 Logo 水平居中,其左右两侧的内容需要占据相同的空间量。这将创造平等的平衡,并且 Logo 可以居中。
或者,您可以使用绝对定位从正常流中删除 Logo 。然后使用 left
和 transform
使 Logo 居中。
此处详细介绍了这两种方法(和其他方法):
这是一个例子:
.menu {
display: flex;
position: relative;
justify-content: space-around;
height: 80px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.menu > * {
flex: 1; /* see linked explanation below */
list-style-type: none;
border: 1px dashed black;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.logo {
flex: 0 0 200px; /* also try `flex: 2` */
background-color: red;
}
<ul class="menu">
<li><a href="/">Homepage</a></li>
<li><a href="/contact/">Contact</a></li>
<li><a href="/documentary/">Documentary</a></li>
<div class="logo"></div>
<li><a href="/stories/">Stories</a></li>
<li><a href="/weddings/">Weddings</a></li>
<div class="socials">
<a href="https://www.instagram.com"><i class="sprite-instagram">i</i></a>
<a href="https://www.facebook.com"><i class="sprite-email">f</i></a>
</div>
</ul>
flex: 1
的工作原理:
关于html - Flexbox - 如何在中心制作 Logo 并将其他元素包裹起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46104124/