图片与单行文本垂直对齐正常，多行文本无法居中的技术问题咨询

现有代码中，图片与单行文本可实现正常垂直对齐，但添加第二行文本后，整体无法保持垂直居中。

单行文本可正常对齐的代码 #

<div class="container">
    <img src="https://i.imgur.com/5CEiuNs.png"/> one sentence
</div>

.container{
    font-size:20px;
}
.container img{
    height: 1.2em;
    vertical-align: middle;
}

添加多行文本后无法对齐的代码 #

<div class="container">
    <img src="https://i.imgur.com/5CEiuNs.png"/>
    <span>
      one sentence
      <br/>
      second sentence
    </span>
</div>

.container{
    font-size:20px;
}
.container img{
    height: 1.2em;
    vertical-align: middle;
}

期望效果：图片与两行文本整体垂直居中，图片位于文本左侧，二者中心线对齐。

解决方案 #

问题根源是vertical-align: middle仅对单行内联元素生效，多行文本容器的布局特性会打破原有对齐逻辑。以下两种方式可快速解决：

方式1：Flex布局（推荐） #

通过Flex布局的垂直对齐属性，直接实现容器内元素的居中，适配所有文本行数：

.container{
    font-size:20px;
    display: flex;
    align-items: center; /* *核心：垂直居中子元素* */
    gap: 8px; /* 可选：为图片和文本添加间距 */
}
.container img{
    height: 1.2em;
}

方式2：表格布局（兼容旧浏览器） #

利用表格单元格的垂直对齐特性实现居中，适合需要兼容低版本浏览器的场景：

.container{
    font-size:20px;
    display: table;
}
.container img, .container span{
    display: table-cell;
    vertical-align: middle;
    padding-right: 8px; /* 可选：图片和文本间距 */
}
.container img{
    height: 1.2em;
}

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