垂直中心UL菜单和IMG在#menu div中

Question

很抱歉，我已经解释了很多已经解释过的东西，但到目前为止我在StackOverflow上看到的解决方案实际上并没有为我工作（table-cell，text-align，vertical-align ... nothing ）。

这里的交易：我的所有代码都在#box div中，这是一个处理居中并包含所有元素的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 size赢了不变）并在其右侧有一个徽标图像和一个菜单，完美地居中于具有已知宽度和高度的div中的垂直空间？

我显然清理了缓存，刷新，做了所有事情，所以我确定更改正在生效......我只是错过了一些非常愚蠢的东西，但我真的无法将两者都集中在一起。

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

Answer 1

也许你可以从中解决这个问题？

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;
 }

只要看看小提琴......

Answer 2

如果高度已知且已修复，我建议

• 确保ul，li和a上没有上/下填充/边距。在line-height

上将a设置为1

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

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

Answer 3

或许这就是你想要的？ Fiddle

您只需将li设为inline-block，将line-height添加到div #menu，其值与height相同，然后添加样式{ {1}} 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宽度的总和，以使其正常工作