用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;
}
提前感谢！
答
页眉因为延长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
答
尝试在你的CSS添加此，改变宽度，无论你根据你的需要
#menu {
width: 900px;
答
附加宽度与#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
}
谢谢你，这正是我需要的！现在，我可以在不知道菜单的确切宽度的情况下将菜单栏居中:)另外，我从来没有听说过reset和normalize.css，但是我从现在开始肯定会使用它！再次感谢你 ：） – user3215000