html - 如何在同一背景 div 的左侧放置图片并将菜单放置在中间？ (含图片)

Question

所以我有 3 个元素:导航栏，它是容器并横跨整个屏幕， Logo 应该包含并位于左侧(虽然高度比容器大，所以我不知道是否这会导致问题)和导航菜单应该恰好位于页面的中间。很抱歉画得不好，但我想表达我的意思:

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

提前致谢。

编辑:

它的工作原理是将 Logo float 在 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漂浮在左边，这样就不会影响到导航栏的宽度了。您的 LOGO 图片应该在导航栏元素和 float:left 内，设置宽度，但确保导航栏的最小宽度等于(或大于)图像和导航菜单的宽度。

你的照片很棒。

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

有各种指南可以更好地确保导航元素永远不会在 Logo 的宽度内移动，例如，导航元素始终与屏幕左侧保持 120 像素的距离，但这是一个开始给你点个赞

回答第 2 部分

The only thing that doesn't work with this, is that when I resize the window to be small the menu elements get knocked onto another line. Anyway to prevent this?

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

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

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