css - #menu div 中的垂直居中 UL 菜单和 IMG

Question

很抱歉问了很多已经解释过的问题，但到目前为止，我在 StackOverflow 上看到的解决方案都没有真正适合我(表格单元格、文本对齐、垂直对齐……什么都没有)。

事情是这样的:我所有的代码都在#box div 中，它处理居中并包含所有元素。这之后的第一个 div 是#menu，它是这样的:

<div id="menu">
 <img src="img/logo.jpg" alt="logo">
 <ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
 </ul>          
</div>

其实没什么特别的，很简单。我的 CSS 看起来像这样:

#menu {
    background-color: #babadc;
    height: 100px;
    margin: 0 auto;
    width: 1280px; }

#menu img {
    float: left; }

#menu ul {
    float: right;
    list-style: none;
    line-height: normal; }

#menu li {
    display: table-cell;
    padding-left: 20px;
    vertical-align: middle; }

请注意，我正在使用基本的 CSS 重置 来避免测试交叉浏览时出现的大多数问题。这里的问题是无论我从 StackOverflow 尝试哪种解决方案，只有 IMG 或 UL 垂直居中或者它们稍微不对齐。

我要问的是:今天仅使用 html/css 完成如此简单的任务(img 大小不会改变)并拥有 Logo 图像和右侧的菜单完全位于已知宽度和高度的 div 中的垂直空间中心？

我显然清理了缓存，刷新，做了所有事情，所以我确定更改正在生效......我只是错过了一些非常愚蠢的东西，但我真的不能同时居中。

为了更好地展示我想要的东西，我做了这个，这应该是一个基本的菜单设置，但有些东西没有按预期工作。这是我想要的结果，请记住我没有写任何规则来从左/右边界移动 img 和#menu ul，因为很明显，现在它们在侧边界上......我稍后会给出边距。

Answer 1

也许这就是你想要的？ Fiddle

你只需要将 li 设置为 inline-block，将 line-height 添加到 div #menu 与 height 的值相同，并在 img 中添加样式 vertical-align: middle ，这是完整的 CSS 需要与您的相同的 HTML

#menu {
    background-color: #babadc;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    width: 1280px;
}
#menu img {
    height: 50px;
    vertical-align: middle;
}
#menu ul {
    margin: 0;
    float: right;
    list-style: none;
}
#menu li {
    display: inline-block;
    padding-left: 20px;
    /*vertical-align: middle; this is not needed because already declare line-height in parent*/
}

请注意，图像的 vertical-align: middle 起作用，因为它跟在其他 inline 或 inline-block 元素之后，而 inline 或 inline-block 元素位于中间，因为在 #menu 上设置了 line-height。并且您还需要确保容器 width 始终大于 image 宽度和 ul 宽度的总和才能正常工作