css - 如何使用 flexbox 使列表项居中?
问题描述
我正在尝试创建一个导航栏,标题在左侧,列表项居中。我使用 flexbox 来水平排列链接。然后我添加margin: auto
到 ul 将它们向左移动但没有对称地居中它们。我猜 ul 已经没有空间移动了。我检查了其他类似的帖子,但无法完全弄清楚问题所在。感谢您的时间。
HTML
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
margin: 0 auto;
padding: 0;
}
#navbar li {
list-style: none;
padding: 20px;
}
<nav id="navbar">
<div class="logo">
<h1>Welcome</h1>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
解决方案
你可以 margin: 0 auto;
从#navbar ul
#navbar
父容器 ( )上的 flexbox已经将ul
. 添加margin: 0 auto
flexbox 后添加它会破坏布局。
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
/* margin: 0 auto; REMOVE THIS LINE */
padding: 0;
}
#navbar li {
list-style: none;
padding: 20px;
}
<nav id="navbar">
<div class="logo">
<h1>Welcome</h1>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
此外,将您的徽标包含在列表项中可能会产生更好的结果:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar, li { /* added flex to li's so content stays vertically centered */
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
/* margin: 0 auto; REMOVE THIS LINE */
padding: 0;
}
#navbar li {
list-style: none;
padding: 0 20px; /* fixed vertical padding to 0 from 20px */
background-color: transparent; /* Added for continuity with your design */
}
<nav id="navbar">
<ul>
<li>
<div class='logo'>
<h1>Welcome</h1>
</div>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
如果您想在徽标和列表项之间添加空格,您可以添加margin-right: ( n )
到徽标本身。见下文:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
background: url('/img/showcase.jpg.jpg');
}
#navbar, li { /* added flex to li's so content stays vertically centered */
display: flex;
justify-content: center;
align-items: center;
flex: 1;
top: 0;
width: 100%;
height: 60px;
background-color: rgba(10, 10, 10, 0.5);
}
#navbar ul {
display: flex;
justify-content: space-around;
text-align: center;
/* margin: 0 auto; REMOVE THIS LINE */
padding: 0;
}
#navbar li {
list-style: none;
padding: 0 20px; /* fixed vertical padding to 0 from 20px */
background-color: transparent; /* Added for continuity with your design */
}
.logo { /* Added space between logo and list items */
margin-right: 5rem; /* you can add units in pixels as well if you would like */
}
<nav id="navbar">
<ul>
<li>
<div class='logo'>
<h1>Welcome</h1>
</div>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
请注意,无论您为所有内容添加多少或多少边距,.logo
都会自动保持居中。
推荐阅读
- r - 将栅格转换为数据框,然后再次转换回栅格?[R]
- dask - 在 dask / xarray 中处理大型时间序列的最佳方法是什么?
- flutter - 铬前进和后退按钮不起作用
- html - 整个 svg 的工具提示
- java - 弹簧靴 || 在 dao + 数据库级别的 Rest 中,50 个同时插入请求将如何表现?
- angular - 我可以使用 Identity Server 4 对我的 Angular 客户端应用程序进行预身份验证,以调用我本地托管的 .Net Core WebAPI
- angular - 未捕获(承诺):错误:无法匹配任何路由。URL 段:'tabs/tab1/discover/a1'
- php - 使用循环 Wordpress 帖子获取多封电子邮件
- regex - Perl 将 2 个正则表达式合并为 1 个
- ios - 无法在 NativeScript 7 或 8 上进行 NFC 写入工作