Css 如何将徽标定位在菜单/导航的中心位置？
在这件事上需要你的帮助。我目前停留在这个CSS定位的标志应该是正确的菜单导航中，就像这个网站…这就是我想要达到的目标 这是我的密码：Css 如何将徽标定位在菜单/导航的中心位置？,css,Css,在这件事上需要你的帮助。我目前停留在这个CSS定位的标志应该是正确的菜单导航中，就像这个网站…这就是我想要达到的目标 这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <title>CSS Position</title> <meta charset="utf-8"> <meta name="description" content=""> <meta name
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Position</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<style>
body {
font:12px Arial, Helvetica, sans-serif;
color:#000;
}
.container {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
#header {
width: 100%;
height: 96px;
position: fixed;
left: 0;
top: 0;
background-color: #f8f8f8;
border-bottom: 1px solid #e4e4e4;
z-index:9999;
}
#logo {
width:76px;
height:64px;
display:block;
position: absolute;
left:50%;
margin-left:-43px; /*I'm not sure if this is the right assigned value for this. Don't know the number/value that i should assign*/
top:15px;
}
#logo a {
background:url(logo.png);
display:block;
width:76px;
height:64px;
}
#menu-left {
width:256px; /*This is just the number/value that I assign based on the size of my screen*/
left:50%;
top:24px;
margin-left:-350px;
z-index:3;
}
#menu-right {
width:256px; /*This is just the number/value that I assign based on the size of my screen*/
right:50%;
top:24px;
margin-right:-350px;
margin-left:0;
z-index:3;
}
.menu {
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
line-height:30px;
text-transform:uppercase;
margin:0;
}
.menu li {
float:right;
margin-left:65px;
line-height:35px;
margin-bottom:0;
position:relative;
list-style:none;
}
#menu-right li {
float:left;
margin-left:0;
margin-right:65px;
}
.menu li a {
color:#000;
text-decoration:none;
}
.menu li a:hover {
color:#999;
}
</style>
</head>
<body>
<div class="container">
<div id="header">
<div id="logo">
<a href="index.html"></a>
</div>
<ul class="menu" id="menu-left">
<li>
<a href="#menu1">Menu1</a>
</li>
<li>
<a href="#menu2">Menu2</a>
</li>
</ul>
<ul class="menu" id="menu-right">
<li>
<a href="#menu3">Menu3</a>
</li>
<li>
<a href="#menu4">Menu4</a>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS位置
正文{
字体：12px Arial，Helvetica，无衬线；
颜色：#000；
}
.容器{
宽度：100%；
身高：100%；
位置：绝对位置；
左：0；
排名：0；
}
#标题{
宽度：100%；
高度：96px；
位置：固定；
左：0；
排名：0；
背景色：#F8；
边框底部：1px实心#e4；
z指数：9999；
}
#标志{
宽度：76px；
高度：64px；
显示：块；
位置：绝对位置；
左：50%；
左边距：-43px；/*我不确定这是否是为此分配的右边值。不知道应该分配的数字/值*/
顶部：15px；
}
#标志a{
背景：url（logo.png）；
显示：块；
宽度：76px；
高度：64px；
}
#菜单左{
宽度：256px；/*这只是我根据屏幕大小分配的数字/值*/
左：50%；
顶部：24px；
左边距：-350px；
z指数：3；
}
#菜单右键{
宽度：256px；/*这只是我根据屏幕大小分配的数字/值*/
右：50%；
顶部：24px；
右边距：-350px；
左边距：0；
z指数：3；
}
.菜单{
位置：绝对位置；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：15px；
线高：30px；
文本转换：大写；
保证金：0；
}
李先生{
浮动：对；
左边距：65px；
线高：35px；
页边距底部：0；
位置：相对位置；
列表样式：无；
}
#菜单右李{
浮动：左；
左边距：0；
右边距：65px；
}
.菜单李a{
颜色：#000；
文字装饰：无；
}
.菜单a:悬停{
颜色：#999；
}