Question

我发现了一个问题，在我的菜单中，我尝试垂直对齐文本以使其居中以及文本处理文本的位置，使用[margin-top：-10px;]在[#menu li]中不适用于我在菜单栏中的3张图像。我已经将html和css包含在菜单中，有人可以告诉我我做错了吗？

JSFIDDLE

由于

我的HTML

<ul id="menu" name="menu">
<li><img src="logo.png" width="100" height="31" />
</li>
<li>
  <div><a href="#">About Us</a>
  </div>
</li>
<li><a href="#">Services</a>
    <ul>
        <li><a href="#">Graphic Design</a>
        </li>
        <li><a href="#">Website Design</a>
        </li>
        <li><a href="#">Budget Design</a>
        </li>
         <li><a href="#">Web Hosting</a>
        </li>
        <li><a href="#">Printing</a></li>
        <li><a href="#">Copy Writing</a></li>
    </ul>
</li>
<li><a href="about.html">Community</a>
  <ul>
        <li><a href="#">Get Creative!</a>
    </li>
        <li><a href="#">Charity Work</a>
        </li>
        <li><a href="#">Impress Us...</a>
        </li>
        <li><a href="#">Careers</a>
        </li>
  </ul>
</li>
<li><a href="#">Contact</a>

</li>
<li><a href="#"><img src="logocrc.png" width="100" height="25" /></a>
</li>
</li>
<li><a href="#"><img src="logoruskin.png" width="100" height="28" /></a>
</li>
</li>
<li><a href="#">Blog</a>
</li>

我的CSS

#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
display: inline-block;
width: 100%;
list-style: none;
position: relative;
top: 0px;
text-align: center;
-webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 40px;
z-index: 101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: inline-block;
list-style: none;
padding-right: 50px;
left: 50px;
margin-top: -10px;
}
#menu > li:hover > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 3px 23px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 3px 23px 0px rgba(50, 50, 50, 0.75);
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 10px 10px;
text-decoration: none;
font-weight: lighter;
white-space: nowrap;
color: #333;

}
#menu li a:hover {
color: #CCCCCC;
font-size: 18px;
vertical-align: middle;
}
#menu li ul li {display: inline-block;
float:none; }

Answer 1

display:table使用#menu，display: table-cell; vertical-align:middle;使用#menu li。同时从margin-top: -10px;移除#menu li。

<强> HTML

<ul id="menu" name="menu">
  <li><img src="logo.png" width="100" height="31" /> </li>
  <li>
    <div><a href="#">About Us</a> </div>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Graphic Design</a> </li>
      <li><a href="#">Website Design</a> </li>
      <li><a href="#">Budget Design</a> </li>
      <li><a href="#">Web Hosting</a> </li>
      <li><a href="#">Printing</a></li>
      <li><a href="#">Copy Writing</a></li>
    </ul>
  </li>
  <li><a href="about.html">Community</a>
    <ul>
      <li><a href="#">Get Creative!</a> </li>
      <li><a href="#">Charity Work</a> </li>
      <li><a href="#">Impress Us...</a> </li>
      <li><a href="#">Careers</a> </li>
    </ul>
  </li>
  <li><a href="#">Contact</a> </li>
  <li><a href="#"><img src="logocrc.png" width="100" height="25" /></a> </li>
  </li>
  <li><a href="#"><img src="logoruskin.png" width="100" height="28" /></a> </li>
  </li>
  <li><a href="#">Blog</a> </li>
</ul>

<强> CSS

#menu, #menu ul {
    margin: 0 auto;
    padding: 0;
    background-color: #FFFFFF;
}
#menu {
    display: table;
    width: 100%;
    list-style: none;
    position: relative;
    top: 0px;
    text-align: center;
    -webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
    font-size: 18px;
    height: 40px;
    z-index: 101;
}
#menu.fixed {
    position: fixed;
    top: 0;
    width: 100%;
}
#menu li {
    display: table-cell;
    list-style: none;
    padding-right: 50px;
    left: 50px;
    vertical-align:middle;
}
#menu > li:hover > ul {
    background: #FFF;
    display: block;
    left: 0;
    width: 100%;
    -webkit-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 3px 23px 0px rgba(50, 50, 50, 0.75);
}
#menu > li > ul {
    display: none;
    position: absolute;
    text-align: center;
}
#menu li a {
    display: block;
    padding: 10px 10px;
    text-decoration: none;
    font-weight: lighter;
    white-space: nowrap;
    color: #333;
}
#menu li a:hover {
    color: #CCCCCC;
    font-size: 18px;
    vertical-align: middle;
}
#menu li ul li {
    display: inline-block;
    float: none;
}

这是一个小提琴http://jsfiddle.net/969ZE/。这应该可以解决你的问题。

垂直文本对齐在菜单栏中有效，但菜单栏中的图像也不对齐

1 个答案: