#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 大小不会改变）并有一个徽标图像和一个右侧的菜单完全位于已知宽度和高度的 div 中的垂直空间的中心？

我显然清理了缓存，刷新了所有内容，所以我确信更改正在生效......我只是错过了一些非常愚蠢的东西，但我真的无法同时居中。

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

Answer 1

也许这就是你想要的？ Fiddle

您只需要将li 设置为inline-block，将line-height 添加到与height 具有相同值的div #menu，并将样式vertical-align: middle 添加到img，这是完整的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 元素位于中间，因为 line-height 设置在#menu。您还需要确保容器 width 始终大于 image 宽度和 ul 宽度的总和才能正常工作

Answer 2

如果高度已知且固定，我会建议

• 确保ul、li 和a 上没有顶部/底部填充/边距。在a 上将line-height 设置为1

• 根据导航高度和图像高度手动设置img 和ul 的上边距。 ul 高度将是您的 font-size 一旦所有额外的填充被删除。 （margin-top = nav 高度减去图像/ul 高度的一半）

看到这个小提琴：http://jsfiddle.net/no5wo77a/1/

Answer 3

也许你可以从这里开始工作？

Fiddle

HTML

<img src="http://www.thenextbestweb.com/wp-content/uploads/2014/06/shell.jpg" alt="logo"   height="80%" width="auto">

CSS

body {
outline: 0;
margin:0;
}

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


#menu img {
float: left;
top: 10%;
position: absolute;
}

#menu ul {
float: right;
list-style: none;
line-height: normal; 
background-color: #FF0000;
height: 20px;
margin-top: 40px;}

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

看看小提琴....