CSS flexbox“对齐项目：flex-end；”不适用于图像

Question

我正在尝试创建一个标题，它可以在标题的右侧和左侧有一个按钮（图像）或一个文本标签：

<div id="header">
    <div id="headerContent">
        <div id="btnLeft"><img src="myimage.png" height="30"></div>
        <div id="title" class="button">HeaderTitle</div>
        <div id="btnRight" class="headerBtn button">RightButton</div>
    </div>
</div><!-- header -->

因此我在 headerContent DIV 上使用 CSS flexbox 模型：

#headerContent {
    width: 100%;
    height: 30px;
    font-family: "Helvetica";
    font-size: 20px;
    line-height: 20px;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-align-items: flex-end;
}

不幸的是，CSS 属性 align-items: flex-end; 仅适用于文本，但不适用于图像。图像总是有一个小的偏移量，因此它会溢出标题 DIV 的顶部。 感觉就像我只是在监督一些微小的事情，但我无法弄清楚它是如何工作的...... 提前感谢您的帮助！！！

Answer 1

Demo

给#btnLeft高度

#btnLeft {
    height: 30px;
}