Html Css：图像始终居中于文本行

我有一个图像和它旁边的一些文字行。行数不是常数。可能有一行、两行或三行文字。案例：

如果只有一行文字：

要居中于文本的图像

如果有两行文字：

要在两条线之间居中的图像

如果有三行：

要居中的图像可能位于中间线

重要提示：我有一个非常重要的要求：文本的容器应具有指定的高度：

以下是我迄今为止的css：

.icon-several-lines {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
}

.info {
     display: inline-block;
     vertical-align: middle;
     height: 120px;
}

html:

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
    </span>
</div>

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>
     <p><span>test test test test test test</span></p>
    </span>
</div>

<div class="icon-several-lines">
    <img class="image" src="http://lorempixum.com/25/25/abstract" alt="" />
    <span class="info">
     <p><span>test test test test test test</span></p>

    </span>
</div>

测试测试

测试测试

测试测试

测试测试

测试测试

测试测试

小提琴：

---

谢谢。

使用表格布局，因为这样可以轻松地垂直对齐内容。使用当前的标记，您不需要做太多更改

img { display: inline-block; vertical-align: middle; }
.info { display: inline-table; vertical-align: middle; height: 120px; }
.info > p { display: table-row; vertical-align: middle; }
.info > p > span { display: table-cell; vertical-align: middle; }

更新的小提琴：

片段：

。图标显示几行{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
垂直对齐：中间对齐；
}
img{显示：内联块；垂直对齐：中间；}
.info{
显示：内联表；
垂直对齐：中间对齐；
高度：120px；
边框：1px实心#ddd；
}
.info>p{显示：表格行；垂直对齐：中间；}
.info>p>span{显示：表格单元格；垂直对齐：中间；}

测试测试

测试测试

测试测试

测试测试

测试测试

测试测试

使用表格布局，因为这样可以轻松地垂直对齐内容。使用当前的标记，您不需要做太多更改

img { display: inline-block; vertical-align: middle; }
.info { display: inline-table; vertical-align: middle; height: 120px; }
.info > p { display: table-row; vertical-align: middle; }
.info > p > span { display: table-cell; vertical-align: middle; }

更新的小提琴：

片段：

。图标显示几行{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
垂直对齐：中间对齐；
}
img{显示：内联块；垂直对齐：中间；}
.info{
显示：内联表；
垂直对齐：中间对齐；
高度：120px；
边框：1px实心#ddd；
}
.info>p{显示：表格行；垂直对齐：中间；}
.info>p>span{显示：表格单元格；垂直对齐：中间；}

测试测试

测试测试

测试测试

测试测试

测试测试

测试测试

您可以使用flexbox（简单有效的方法）：

CSS

.icon-several-lines {
    display: flex;
    align-items: center;
}
.info {
    flex: 1 0 auto;
}

您可以使用flexbox（简单有效的方法）：

CSS

.icon-several-lines {
    display: flex;
    align-items: center;
}
.info {
    flex: 1 0 auto;
}