Question

在下面的代码中，我正在努力将li HELLO完全对准ul的中心但是它已经转移到了左侧。在这里，我不是在寻找解决方案（因为我正在尝试通过此代码练习和理解功能）。但我最重要的是寻找理由和解释为什么会发生这种情况。

即使我已将li的左/右边距设置为auto。那么为什么它不会进入ul的中心呢？为了视觉辅助，我为li创建了边框，以便您可以轻松找到它的确切位置。我知道通过减少/改变ul的宽度，可以纠正这个问题。但是没有其他方法可以使文本自动对齐中心（无需手动调整宽度，填充等）吗？此外，如果我增加文本的长度或更改其字体大小，我希望文本在中心对齐。

＆＃13;

html body {
	height: 100%;
	width: 200px;
}

ul {
	background-color: rgba(0,0,0,1);
	height: 100px;
	width: 150px;
}

li {
	color: rgba(255,255,255,1);
	margin-right: auto;
	margin-left: auto;
	list-style-type: none;
	width: 50px;
	text-align: center;
	border: thin solid rgba(255,255,255,1);
	float: left;
}

＆＃13;

<ul>
<li>Hello</li>
</ul>

＆＃13;

Answer 1

它稍微向右，因为ul默认为padding-left;将padding-left: 0;设置为ul将使其完全离开。然后li不会居中，因为您使用float: left;将其浮动到左侧，这将使其忽略您设置的margin: auto;。如果您移除float li将位于中心。

我猜您使用的是float，因为列表中会有更多li's，您希望它们全部在一行上，并以ul为中心。在这些情况下，我通常做的是：

ul {
    text-align: center;
}

li {
    display: inline-block;
}

实施例

＆＃13;

ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  margin: 0 10px;
  border: 1px solid black;
  padding: 5px;
}

＆＃13;

<ul>
  <li>Example1</li>  
  <li>Example2</li>
  <li>Example3</li>
</ul>

＆＃13;

Answer 2

我在这里看到两个问题：

默认情况下，ul元素使用左边的填充进行渲染。这就是为什么给你的间距，也许是围绕该元素被推向右边的混乱。

此外，您还要将float属性添加到<li>元素中。删除它，您应该看到<li>居中。

ul {
    padding: 0;
    background-color: rgba(0,0,0,1);
    height: 100px;
    width: 150px;
}

li {
    color: rgba(255,255,255,1);
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    width: 50px;
    text-align: center;
    border: thin solid rgba(255,255,255,1);
}

li没有在中心对齐到ul

2 个答案: