Question

所以下面是制作你在底部看到的图片的所有代码。我尽我所能使这个网站响应，但现在的主要问题是菜单栏没有居中（垂直），左侧是徽标。我怎样才能让它集中在那里？我尝试将顶部设置为50％并保持原样。现在背景颜色为红色仅包含菜单栏由于某种原因，即使徽标应该在其中。谢谢你的帮助。

HTML：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bond Solutions | Home</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="menubar.css" />
<script type="text/javascript">
var video;
window.onload = function () {
window.video = document.getElementById("video");
window.video.addEventListener('ended',myHandler,false);
window.video.volume=0.5;
}
function myHandler() {
        window.video.currentTime = 7;
        window.video.volume=0;
        window.video.play();
}
</script>
</head>

<body>
<center>
<div id="site">
<div id="header">
<img class="logo" src="images/logo.svg" />
<div id="menu">
<ul id="menu-bar">
 <li class="active"><a href="index.html">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Stock Photos</a></li>
   <li><a href="#">Stock Videos</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Web Design</a></li>
   <li><a href="#">Graphic Design</a></li>
   <li><a href="#">Computer Repair</a></li>
   <li><a href="#">Computer Cleaning</a></li>
   <li><a href="#">Custom Computers</a></li>
   <li><a href="#">Retro Console Refurbishing</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</center>
</body>
</html>

CSS：

body {
    background-color: #000;
}
#site {
    background-color:#0F0;
    width:75%;
}
#header {
    position:relative;
    background-color:red;
    height:50%;
    width:100%;
}
.logo {
    width:auto;
    max-width:100%;
    height:auto;
    float:left;
}
#menu {
    top:50%;
}
#menu ul ul {
display: none;
}

#menu ul li:hover > ul {
display: block;
}
#menu ul{
background: #AC2828;
background: linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -moz-linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -webkit-linear-gradient(top, #AC2828 0%,#A31010 100%);
box-shadow: 0px 0px 8px #A31010;
padding: 0 20px;
border-radius: 10px; 
list-style: none;
position: relative;
display: inline-table;
}
#menu ul li {
 float: left;
 border-right:1px solid #8A0000;
}
#menu ul li:last-child{
 border-right:none;
}

#menu ul li:hover {
  background: #4b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #811919 0%,#680000 40%);
}

#menu ul li:hover a {
   color: #fff;
}

#menu ul li a {
   font-family: 'Pathway Gothic One', sans-serif;
   font-size:14px;
   display: block;

   padding: 14px 40px;
   color: #fff; text-decoration: none;
}
#menu ul ul {
background: #811919; border-radius: 0px; padding: 0;
position: absolute; 
}
#menu ul ul li {
float: none; 
border-top: 1px solid #680000;
border-bottom: 1px solid #8F3333;
position: relative;
}
#menu ul ul li a {
padding: 14px 40px;
color: #fff;
}

#menu ul ul li a:hover {

background: #AC2828;
}

照片： Failure

Answer 1

要使徽标正确放入标题，您需要在标题中添加clearfix。

 <div style="clear:both;"></div>

在标题的结尾</div>之前添加它。

然后使其在中间对齐：

#header {
    position:relative;
    background-color:red;
    height:50%; 
    display: table;
    width:100%;
}

#menu {
  display: table-cell;
  vertical-align: middle;
}

<强> DEMO

无法正确对齐CSS菜单

1 个答案: