li不在ul的中心對齊

Question

在下面的代碼中，我正在努力將li HELLO精確地對齊到ul的中心，但是它已移至左側。 在這里，我不是在尋找解決方案（因為我正在嘗試通過此代碼練習和理解功能）。 但是，最重要的是，我正在尋找原因和解釋，說明為什么會這樣。

即使我已將li的左/右邊距設置為auto。 那為什么它不在ul的中心呢？ 為了提供視覺幫助，我為li創建了邊框，以便您可以輕松找到它的確切位置。 我知道通過減小/更改ul的寬度，可以解決此問題。 但是，還有沒有其他方法可以使文本自動居中對齊（無需手動調整寬度，填充等）？ 另外，如果我增加文本的長度或更改其字體大小，我希望文本在中心對齊。

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

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

Answer 1

它稍微靠右，因為ul默認情況下padding-left ； 設置padding-left: 0; 到ul會使它完全離開。 然后li不會居中，因為您使用float: left;將其浮動到float: left; 這將使其忽略margin: auto; 你已經設定了。 如果您刪除float則li將位於中間。

我猜您使用了float因為列表中會有更多li's ，並且您希望它們全部在一行上並以ul為中心。 在這些情況下，我通常要做的是：

ul {
    text-align: center;
}

li {
    display: inline-block;
}

例：

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

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

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);
}