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

Posted 2023-03-05

【中文标题】#menu div 中的垂直居中 UL 菜单和 IMG

【英文标题】：Vertical center UL menu and IMG in a #menu div

【发布时间】：2014-11-17 10:27:08

【问题描述】：

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

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

<div id="menu">
 <img src="img/logo.jpg" >
 <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 重置，以避免在测试交叉浏览时出现大多数问题。 这里的问题是无论我从 *** 尝试哪种解决方案，只有 IMG 或 UL 垂直居中，或者它们稍微不对齐。

我的要求是：今天最好的方法是用 html/css 完成如此简单的任务（img 大小不会改变）并有一个徽标图像和一个右侧的菜单完全位于已知宽度和高度的 div 中的垂直空间的中心？

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

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

【参考方案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 宽度的总和才能正常工作

【讨论】：

这行得通。显然，浮动到左侧的图像阻止了它垂直对齐......这是为什么呢？我认为每当您将两个元素浮动在同一行或并排时，您总是需要将一个向左浮动，一个向右浮动，然后再清除。

@daghene 因为floated 元素将与element 的当前流分离，就像位置absolute 或fixed 一样

应该记得！我有最后一个问题，在 a:hover 状态下，我应该在菜单顶部显示一个 2px 边框。不是在作品上，而是在 div 的顶部，考虑到我使用了这个技巧，是否有可能？我可以提供填充和边距，但考虑到我改变了元素的高度，它并不总是一样的。

@daghene，对不起，我并没有真正得到你想要的。您能否提供一些关于其中的hyperlink 的小提琴以及您想要的图像？因为您当前的HTML 没有任何hyperlink。是否在每个<li> 内，您是否希望将边框悬停在<li>？

完全正确。我知道如何在普通菜单上做到这一点，但考虑到这已经有点风格，它在某种程度上不起作用。假设当您将鼠标悬停在该菜单的 li/a 上时，应该有一个边框，不仅在文本上方，而且在菜单声音的上部，所以我猜基本上在 line-height 的顶部？它以某种方式一直以这种样式显示在文本上。基本上我正在尝试实现这一点：imgur.com/dx1fOh7 大红色框是当前页面，顶部红色边框是悬停状态。这种样式有点给我带来问题。

【参考方案2】：

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

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

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

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

【讨论】：

Kyojimaru 在代码方面有一个更轻量级的版本，但这也有效，谢谢你的替代方案！

【参考方案3】：

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

Fiddle

HTML

<img src="http://www.thenextbestweb.com/wp-content/uploads/2014/06/shell.jpg"     >

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;
 

看看小提琴....

【讨论】：

同意有更清洁的选择，但这是一个不错的选择，也尝试过。谢谢:)