用CSS居中菜單欄

我的菜單欄有兩個問題。我想要實現的是將標題中的鏈接居中（包括標誌圖片），並且標題的高度與菜單完全相同。當我添加鏈接時，它會在頂部和底部創建一個邊距（所以頭部會延伸），我不知道爲什麼。頁邊距大小取決於字體大小，如果我想刪除它，我必須添加一個px頁邊距，並且必須逐個像素地嘗試數字應該是多少。我敢肯定，有一個更簡單的解決方案...我的另一個問題是，我不能集中在標題的整個菜單欄，除非我指定一個特定的寬度。很顯然，我不知道菜單欄會有多寬（即使我以某種方式測量它，如果稍後再更改鏈接會怎樣？）我對HTML和CSS相當陌生，所以我可能犯了一堆錯誤，我只是不斷改變代碼，直到我得到我想要的，但由於我試圖更好地學習它，我打算更多的理解，而不是隨機編碼，所以請隨時糾正任何問題。這裏的HTML：用CSS居中菜單欄

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My website</title> 
<link rel="stylesheet" type="text/css" href="images/style.css" /> 
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'> 
</head> 

<body> 

<div id="header"> 
<div id="menu"> 
<ul> 
<li><img src="images/ncs.png" /></li> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
<li id="right"><a href="#">English</a></li> 
</ul> 
</div> 
</div> 


</body> 
</html>

而CSS：

@charset "utf-8"; 

body { 
background-color: #efe8df; 
} 

#header { 
width: 100%; 
height: auto; 
background-color: #afafaf; 
position: absolute; 
top:0px; 
left:0px; 
right:0px; 
} 

#menu { 
margin: auto; 
padding: 0px; 
list-style: none; 
font-family:'Belleza', sans-serif; 
color: white; 
font-size: 22px; 
/*width: 1000px;*/ 
height: auto; 
position: relative; 
} 

#menu li { 
list-style: none; 
width: auto; 
height: auto; 
text-align: center; 
vertical-align: middle; 
display: table-cell; 
border-right: 1px solid #ebeaea; 
} 

#menu li a { 
color: #FFFFFF; 
text-decoration: none; 
display: block; 
padding: 30px; 
border-bottom: 3px solid transparent; 
} 

#menu li a:visited { 
color: #FFFFFF; 
text-decoration: none; 
display: block; 
padding: 30px; 
border-bottom: 3px solid transparent; 
} 

#menu li a:hover { 
color: #46b5c2; 
text-decoration: none; 
background-color: #ebeaea; 
display: block; 
padding: 30px; 
border-bottom: 3px solid #46b5c2; 
} 

#menu li a:active { 
color: #46b5c2; 
text-decoration: none; 
background-color: #ebeaea; 
display: block; 
padding: 30px; 
border-bottom: 3px solid #46b5c2; 
} 

#menu #right { 
border-right: 0px; 
font-family: Georgia; 
font-size: 14px; 
}

提前感謝！

來源

2014-01-20 user3215000

頁眉因爲延長UL和希望li所有瀏覽器都有保證金和填充標準。您應該使用reset.css和normalize.css來刪除一些常用元素的默認css屬性。

所以如果你想只爲列表中使用

ul,li{margin:0; padding:0}，有多少你想要的。

爲中心對齊，你可以給下面的CSS屬性

到頭

display: table

菜單

display : table-cell; 
text-align:center

到UL

display:inline-block

李

float:left

檢查小提琴 http://jsfiddle.net/gJFy8/1/

來源

2014-01-20 12:38:10

謝謝你，這正是我需要的！現在，我可以在不知道菜單的確切寬度的情況下將菜單欄居中:)另外，我從來沒有聽說過reset和normalize.css，但是我從現在開始肯定會使用它！再次感謝你：） – user3215000

嘗試在你的CSS添加此，改變寬度，無論你根據你的需要

#menu { 

width: 900px;

來源

2014-01-20 12:24:35

附加寬度與#menu DIV

menu { 
margin: auto; 
padding: 0px; 
list-style: none; 
font-family: 'Belleza', sans-serif; 
color: white; 
font-size: 22px; 
width: 1000px; 
height: auto; 
position: relative; 
width: 960px; //or whatever 
}

來源

2014-01-20 12:26:09 wpdaniel

用CSS居中菜單欄

回答

相關問題