CSS如何居中水平菜單？

我有這個問題我不能集中這個簡單的CSS Horizontam菜單可以幫助我如何做到這一點？所以這裏是我的CSS代碼CSS如何居中水平菜單？

<style> 
{ 
float:left; 
width:100%; 
padding:0; 
margin:0; 
list-style-type:none; 
} 
a 
{ 
float:left; 
width:6em; 
text-decoration:none; 
color:white; 
background-color:purple; 
padding:0.2em 0.6em; 
border-right:1px solid white; 
border-left:1px solid white; 
} 
a:hover {background-color:#ff3300;} 
li {display:inline;} 
</style>

這裏是我的html

</head> 
<body bgcolor="gray"> 
<font face="calibri"> 

<center><img style="float:center" src="header.jpg" alt="" ></center> 
<center> 
<ul> 
<li><a href="#">HOME</a></li> 
<li><a href="#">EVENTS</a></li> 
<li><a href="#">VIDEOS</a></li> 
<li><a href="#">CONTACT US</a></li> 
</center> 

</ul>

謝謝你在這裏幫我我只是個新成員。請回復感謝

來源

2014-02-23 2cool4u

第一步是刪除'

'。也沒有'float：center' css屬性。你似乎也錯過了你的css中的東西。第一個'{...}'塊沒有指定選擇器... –

是的，我試圖編輯所有內容並將其更改爲中心。只是嘗試一些。對不起回合 – 2cool4u

通常，您將左右邊距設置爲「自動」。 – Ned

Fiddle

使用text-align: center並刪除所有float: left上ul和a標籤。

ul {  
    width:100%; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    text-align: center; 

}

來源

2014-02-23 04:28:40 JunM

是的它爲中心。但它看起來不太好 – 2cool4u

@ user3236746你只會要求將這些水平菜單置於中心位置，現在它已經居中:) – JunM

CSS如何居中水平菜單？

回答

相關問題