将列表项居中放在无序列表中

Question

我一直在靠墙砸墙试图解决这个问题。

我正在为我的博客构建一个自适应网站。导航栏由The value '-100' is not valid for Invoice(s) Amount. 和6 <ul>组成。其中5个显示在全尺寸屏幕上。当屏幕缩小到移动尺寸时，会出现导航图标，其他列表项目会消失。出于某种原因，我无法将navicon（汉堡包图标）显示在屏幕中央。我试图避免使用position：relative来居中。

<li>

/*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;
}


}

Answer 1

您可以通过设置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">&#9776;</a></li><!--On a mobile device this is the only list item displaying -->
			</ul>
		</nav>
	</div>
</aside>

Answer 2

您可以使用text-align: center;，但需要定位列表项而不是锚标记。这也将它放在有序列表的最右侧和页面的右侧之间。要抵消这一点，您可以设置图标右侧的边距以偏移宽度。

像这样的东西

HTML：

<li class="center"><a href="#" class="menu-icon">&#9776;</a></li>

CSS

.center {
    text-align: center;
    margin-right: 40px;
}

编辑：查看网站后，您的主要CSS文件中的行aside nav ul li { float: left; }看起来像是响应式设计中的菜单图标，并强制它向左拉。如果你删除这一行它会弄乱整个导航栏，所以你可以考虑在最小500px上放一个媒体查询（如果这是你的断点），如下所示：

 @media only screen and (min-width: 500px) {
    aside nav ul li { float: left; }
}

使用此功能，您不需要上面给出的CSS代码，并且可以在响应式设计部分中使用旧式margin: 0 auto;将图标居中。

 .center {
        margin: 0 auto;
    }

请确保class="center"定位您的列表项。 希望这有效： - ）。