带图像的嵌套弹性框具有额外高度

Question

我正在使用仅使用HTML和CSS的页面导航栏。它应该是这样的，徽标设置包含div的高度，然后文本垂直居中于其旁边的其他div。

应该是什么样的：

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

• 容器（nav-holder）伸展以适合最高内容
• 第二个容器（nav-item）应该与其父容器一样高
• 第三个容器（nav-cont）应该与其内容一样高，并且应该在nav-item
内垂直居中

相反，我最终在我的徽标底部nav-cont内有一个奇怪的额外空间，我无法弄清楚它来自哪里。

看起来像这样：

它的真实情况：

HTML code：

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

尝试修复：

• 检查是否为图像或div一般设置了边距或填充。
• 查看StackOverflow上最类似解决问题的信息（“CSS flexbox垂直/水平中心图像，没有明确定义父高度”）
• 通过几个flexbox教程，看看是否有任何类似的问题，包括GitHub上的“由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周围留出空间。

<强>更新

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

如果这有助于投票！