我一直在想办法解决这个问题,将头撞在墙上已经太久了。
我正在为我的博客构建一个响应式网站。导航栏由具有6个<ul>
的<li>
组成。其中5个显示在全尺寸屏幕上。当屏幕缩小到移动大小时,将出现导航图标,其他列表项消失。由于某些原因,我无法使navicon(汉堡图标)出现在屏幕中央。我试图避免使用position:relative将其居中。
/*Reponsive CSS*/
@media only screen and (max-width: 500px) {
#navbar nav a {
display: none;
}
#navbar nav a.menu-icon {
display: block;
font-size: 35px;
padding: 30px 30px;
}
#navbar nav a.menu-icon:hover {
text-decoration: none;
}
}
<aside>
<div id="navbar">
<nav>
<ul>
<li><a href="/">Item 1</a></li>
<li><a href="blank.html">Item 2</a></li>
<li><a href="blank.html">Item 3</a></li>
<li class="pull-right"><a href="blank.html">Item 4</a></li>
<li class="pull-right"><a href="blank.html">Item 5</a></li>
<li><a href="#" class="menu-icon">☰</a></li><!--On a mobile device this is the only list item displaying -->
</ul>
</nav>
</div>
</aside>
最佳答案
您可以通过设置text-align:center;
将元素或文本节点居中,也可以通过在元素本身上应用margin-left: auto; margin-right: auto;
来使块元素居中。
在这种情况下,<li>
及其<a>
跨越了其父对象的整个宽度,只是<a>
内的文本未居中。因此,您必须将text-align: center;
应用于.menu-icon
类
/*Reponsive CSS*/
@media only screen and (max-width: 500px) {
#navbar nav a {
display: none;
}
#navbar nav a.menu-icon {
display: block;
font-size: 35px;
padding: 30px 30px;
text-align: center;
}
#navbar nav a.menu-icon:hover {
text-decoration: none;
}
}
<aside>
<div id="navbar">
<nav>
<ul>
<li><a href="/">Item 1</a></li>
<li><a href="blank.html">Item 2</a></li>
<li><a href="blank.html">Item 3</a></li>
<li class="pull-right"><a href="blank.html">Item 4</a></li>
<li class="pull-right"><a href="blank.html">Item 5</a></li>
<li><a href="#" class="menu-icon">☰</a></li><!--On a mobile device this is the only list item displaying -->
</ul>
</nav>
</div>
</aside>