在屏幕上居中顯示HTML菜單

我在使屏幕上的菜單居中時遇到了一些問題。我認爲將顯示屏設置爲阻止狀態，並將左右邊距設置爲自動，這對我來說是這樣的;然而，我錯了。這裏有一個JSFiddle來幫助顯示問題。謝謝您的幫助。在屏幕上居中顯示HTML菜單

<ul id="menuList"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="About.html">About</a></li> 
    <li><a href="Contact.html">Contact</a></li> 
</ul> 


#menuList{ 
    display:block; 
    width:100%; 
    margin-left:auto; 
    margin-right:auto; 
} 

#menuList ul{ 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
} 

#menuList li 
{ 
    list-style: none; 
    float: left; 
    margin-right: 0.5em; 
} 

#menuList a 
{ 
    display: block; 
    width: 8em; 
    color: black; 
    text-decoration: none; 
    text-align: center; 
}

來源

2014-10-10 Jason W

設置菜單inline-block和家長text-align:center

JS Fiddle

與parentid或class

body { 
    text-align:center; 
} 
#menuList { 
    display:inline-block; 
}

來源

2014-10-10 15:35:46

@JasonW請重新考慮。這不是一個好主意。您必須插入一個CSS規則，該規則覆蓋每個元素上的文本對齊中心。這是太多的開銷，因爲一個可以輕鬆解決的問題。（請參閱我的回答。） – 2014-10-10 15:41:48

正如我所提到的，Vitorino可能將他的示例作爲文本對齊身體，但是他的代碼上面的措辭對父元素說。在這種情況下，我的父元素包含我的菜單;讓我的身體不被文字對齊 – 2014-10-10 15:50:23

維托裏諾的回答取代body通常是一個壞主意。你不想把文本對齊：放在你的身體上。

但是，您可以在ul上設置該CSS，並顯示內聯菜單項（-block）。 As such。

#menuList ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
    text-align: center; 
} 
#menuList li { 
    list-style: none; 
    display: inline-block; 
    margin-right: 0.5em; 
}

來源

2014-10-10 15:40:27

Vitorino的答案只是將text-align：center放在菜單的父元素上;在我的情況下，這不是身體。這個父元素只包含菜單。 – 2014-10-10 15:47:26

到中心的元素的最佳方式是通過使用margin: 0 auto;但元件需要有一個固定的寬度（不是100％你有）。

所以只需添加：

#menuList { 
    width:408px; 
    margin:0 auto; 
}

來源

2014-10-10 15:41:03 GramThanos

你必須改變寬度，例如：

#menuList{ 
    display:block; 
    width:70%; 
    margin-left:auto; 
    margin-right:auto; 
}

來源

2014-10-10 15:44:53 massilva

您使用的顯示模塊，讓您的元素開始新行，然後花車，他們將保持相同的路線。只是不要使用這個奇怪的組合。
如果您需要物品保持在線使用'display：inline'
如果您需要將項目粘貼到父元素的左側或右側，請使用浮動元素。因爲花車經常把所有的東西弄糟，所以要小心。還有其他的方式來浮動東西，這不會將它們從文檔流中拖出來。
這是固定的CSS：

#menuList{ 
    display:block; 
    width:100%; 
    margin: 0 auto; 
    text-align:center; 
} 

#menuList ul{ 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
} 

#menuList li 
{ 
    list-style: none; 
    display: inline; 
    margin-right: 0.5em; 
} 

#menuList a 
{ 
    display: inline-block; 
    width: 8em; 
    color: black; 
    text-decoration: none; 
    text-align: center; 
}

來源

2014-10-10 15:58:10 Kiaurutis

在屏幕上居中顯示HTML菜單

回答

相關問題