带有图像的嵌套弹性框有额外的高度[重复]

Question

我正在为仅使用 HTML 和 CSS 的页面制作导航栏。它应该看起来像这样，徽标设置包含div 的高度，然后将文本垂直居中在它旁边的其他divs 中。

它应该是什么样子：

我试图通过设置一些嵌套的弹性盒子来做到这一点。这个想法是：

• 容器 (nav-holder) 会拉伸以适应最高的内容
• 第二个容器 (nav-item) 都应该与其父容器一样高
• 第三个容器 (nav-cont) 应该和它自己的内容一样高，并且应该在 nav-item 内部垂直居中

相反，我在nav-cont 内的徽标底部有一个奇怪的额外空间，我不知道它来自哪里。

看起来像这样：

真正的样子：

HTML 代码：

<div id="header">
    <div id="nav-holder">
        <div class="nav-item">
            <div class="nav-cont"><img src="images/placeholder-logo.jpg"/></div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Listings</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Services</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">About</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Blog</div>
        </div>
        <div class="nav-item">
            <div class="nav-cont">Contact</div>
        </div>
    </div>
</div>

CSS 代码：

#nav-holder {
    background-color: blue;
    display: flex;
}

.nav-item {
    background-color: yellow;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
}

.nav-cont {
    background-color: green;
}

尝试的修复：

• 检查是否为图像或一般divs 设置了边距或填充。
• 在 StackOverflow 上最相似的已解决问题中查找信息（“CSS flexbox vertical/horizo​​ntally center image WITHOUT explicitely defined parent height”）
• 浏览了几个 flexbox 教程，看看是否有任何描述的类似问题，包括 GitHub 上的“Solved by Flexbox”和 Greg Smith 的“Dive into Flexbox”

Answer 1

我查看了您的代码并更改了一些 CSS 以尝试了解您想要什么。

#nav-holder {
    background-color: blue;
    display: flex;
}

.nav-item {
    background-color: yellow;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
    padding: 10px;
}

.nav-cont {
    background-color: green;
    width: 70px;
    text-align: center;
}

这是一个 Jsfiddle：

https://jsfiddle.net/r3msjtnL/

您必须将 nav-cont div 更改为像素并将文本浮动在中心，因此它不是不平衡的。另外，我添加了一个填充来在您的 nav.items 周围腾出空间。

更新：

如果您不希望将按钮固定到特定像素，请尝试将宽度更改为百分比 (%)！

如果这有助于投票！