如何将图片定位在左侧，将菜单定位在同一背景 div 的中间？（包括图片）答案

【问题标题】：How do you position a picture to the left and a menu in the middle of the same background div? (Picture included)如何将图片定位在左侧，将菜单定位在同一背景 div 的中间？（包括图片）
【发布时间】：2015-03-12 15:58:57
【问题描述】：

所以我有 3 个元素：作为容器的导航栏，它延伸到整个屏幕，应该包含并定位在左侧的徽标（虽然高度大于容器，所以我不知道是否这会导致问题）和导航菜单应该正好在页面的中间。很抱歉画的不好，但我想表达我的意思：

我尝试了多种方法来做到这一点，将导航栏设置为块，将导航菜单和徽标内嵌块，并尝试将文本对齐：使导航菜单居中，但它保持在左侧。我可以在这里使用百分比边距来尝试将其置于中间，但如果我在不同的屏幕上尝试它似乎偏离中心。我试图只使用 margin: auto 0;在导航菜单上并将其居中，但随后出现在菜单下方而不是导航栏内。我最接近的是将徽标放在导航栏 div 之外，然后导航栏漂浮在它旁边，但随后 margin: auto 0;只会把它放在缩短的导航栏的中心，而不是页面的中心。

提前致谢。

编辑：

它的工作原理是将徽标浮动在导航栏 div 左侧，如下所示：

    #navBar { 
background-image: url('transp50.png'); 
min-width: 100%; 
height: 50px; 
} 
    #logo { 
float: left; 
width: 200px; 
} 
    #navmenu { 
margin: 0 auto; 
width: 350px; 
}

唯一不起作用的是，当我将窗口调整为小时，菜单元素会被撞到另一行。无论如何要防止这种情况发生？

【问题讨论】：

Emma，你能不能提供一些你的代码，这样我们就不用从头开始了？
定义“小”？您也可以显示 CSS 的 HTML，干杯
通过将导航栏的最小宽度设置为徽标宽度和导航菜单宽度来修复它（我想你一开始就告诉我这样做！）。谢谢！

标签： html css

【解决方案1】：

让徽标浮动到左侧，这样就不会干扰导航栏的宽度。您的 LOGO 图像应该在 NAV bar 元素和 float:left 内，设置宽度，但要确保 nav bar 的 min-width 等于（或大于）图像和导航菜单的宽度。

你的照片太棒了。

伪代码/HTML5：

<nav>

<a>menu element</a>
...
<a>menu-element</a>
</nav>
<img id="logo" src="..." width="120">

CSS：

nav {
width:100%;
text-align:center;
padding-left:120px; // the same width as the logo to prevent overlap 
}
nav > a {
display:inline-block;
}
#logo {
float:left;
width:120px;
}
#logo::after {
clear:both; //clears the floating element space.
}

有很多关于如何更好地工作以确保导航元素永远不会在徽标宽度内移动的指南，例如，导航元素始终与屏幕左侧保持 120 像素的距离，但这是一个开始给你点

回答第 2 部分

唯一不适用的是，当我调整窗口变小，菜单元素被撞到另一行。无论如何要防止这种情况发生？

如果没有看到您在本节中的 HTML，我猜您需要使用 min-width 来阻止 #navmenu 部分缩小。

因此判断 350px 是您对该#navmenu 添加的最小工作宽度：

#navBar {
min-width:550px; //200+350
}

【讨论】：

您在第一条评论中所说的实际上效果很好，这是唯一有效的方法。所以我有：#navBar { background-image: url('transp50.png');最小宽度：100%；高度：50px； } #logo { 浮动：左；宽度：200px； } #navmiddle { 边距：0 自动；宽度：350 像素；哪个工作正常，唯一不起作用的是当我调整屏幕大小时，如果导航元素太小，导航元素将移至新行。无论如何我可以防止这种情况发生吗？感谢您的帮助:)
您能否将代码作为编辑添加到您的原始帖子中，因为 cmets 不能非常清楚地显示代码。欢呼
是的，抱歉！现在可以了。

【解决方案2】：

你可以这样做：

<div id="navbar">
<img id="mylogo" />
<div id="nav"></div>
</div>

一些可能有帮助的 CSS：

#navbar {
  // should not require anything in particular
}

#nav {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

#mylogo {
  float: left; // won't increase the bar size will stay on the left
}

【讨论】：