如何将图片放在左边，将菜单放在同一个背景div的中间？ （包含图片）

Question

所以我有3个元素：导航栏是容器并横跨整个屏幕，标志应该包含并定位在左侧（尽管高度比容器大，所以我不知道是否这导致问题）和导航菜单应该正好在页面的中间。对不起油漆图片，但我希望能够表明我的意思：

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

提前致谢。

编辑：

它的工作方式是将navBar div中的徽标浮动，如下所示：

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

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

Answer 1

让徽标浮动到左侧，然后它不会干扰导航栏的宽度。您的LOGO图像应位于NAV条形元素内并浮动：左侧，设置宽度，但确保导航条的最小宽度等于（或大于）图像宽度和导航菜单。

你的照片太棒了。

伪代码/ 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.
}

有各种指南关于更好地工作以确保导航元素永远不会在徽标的宽度内移动，因为导航元素始终保持距离屏幕左侧120px，但这是一个开始指向你

答案第2部分

  

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

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

判断350px是#navmenu add的最小工作宽度：

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

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