无法将div中的文本与图像垂直居中

Question

我有一个包含图像和文本的div。我试着简单地垂直对齐文本。

我尝试过设置vertical-align: center;和line-height:90px，但似乎都没有任何效果。

如果我删除图像，即使只有line-height:90px也能完成这项工作，所以我怀疑这与影响div基线的图像有关

如果可能的话，我更喜欢没有flexbox的解决方案。

我的代码：

.menubuttons{
height:90px;
background-color: red;
font-size:30px;
/*my unsuccessful attempt at centering the text vertically*/
vertical-align: middle;
line-height:90px;
}
.menubuttons img{
height:50px;
margin:20px;
}

<div class="menubuttons"><img src='https://cdn-icons-png.flaticon.com/512/2111/2111806.png'/>Stack Overflow</div>

jsfiddle在SO代码片段未添加的情况下

Answer 1

只需在.menubuttons 中添加这两个属性

.menubuttons{ display:flex; align-items:center; }