含图片的div内文本无法垂直居中的解决求助

问题核心 #

你遇到的情况是：包含图片和文本的div中，line-height在移除图片后能生效，带图片时失效，本质是图片作为inline元素默认以基线（底部）对齐，拉扯了容器内文本的基线位置，导致垂直居中失效；且块级元素的vertical-align属性本身不生效，你之前设置的vertical-align: center（正确值应为middle）对div无效。

解决方案1：给图片添加vertical-align: middle #

这是最轻量化的修正方案，只需调整图片的垂直对齐方式，让它和文本以中线对齐：

.menubuttons{
    height:90px;
    background-color: red;
    font-size:30px;
    line-height:90px; /* 维持文本自身的垂直居中 */
}
.menubuttons img{
    height:50px;
    margin:20px;
    vertical-align: middle; /* 关键：让图片与文本中线对齐 */
}

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

解决方案2：使用Table-Cell布局 #

如果需要更通用的垂直居中逻辑（不依赖line-height，适配多行文本场景），可以将父元素设置为表格单元格模式：

.menubuttons{
    height:90px;
    background-color: red;
    font-size:30px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px; /* 替代图片的margin，避免容器溢出 */
}
.menubuttons img{
    height:50px;
    margin-right: 20px; /* 给图片和文本添加间距 */
}

内容的提问来源于stack exchange，提问作者Daavee18