Html 居中放置元素，直到内容足够长，然后与顶部对齐？

我有一组项目，显示一个图标（图像），标题+文本如下

这基本上很好用。然而，在某些页面上，每个项目没有一段文字，只有一个标题。因此，当图标仅水平显示在标题旁边时，标题与顶部对齐时看起来很奇怪

我的问题是，是否可以将图标置于文本旁边的中心位置，直到内容足够高，达到图标/容器的顶部

标题+文本（1）的示例：

仅包含标题（2）的示例：

正如您在示例（1）中所看到的，在手机上，当文本填充图标时，图标的响应性很好

在第二个示例（2）中，标题位于图标顶部，看起来有点垃圾

我曾尝试将标题垂直居中放置在图标旁边，但当添加文本时，它看起来很奇怪。那么，是否有可能将图标居中放置，直到标题/文本占据足够的垂直空间，到达容器的顶部，然后它将只是顶部对齐

或者我需要有两个不同的类，比如

.features

，然后是

.features--centered

或

.features--no text

，用于没有那么多内容的项目

提前谢谢你，在这里把我自己绑起来

/**
*Base`html`样式。
*/
html{
背景：白色；
字体大小：62.5%；
}
/**
*基本“身体”样式。
*/
身体{
背景色：白色；
颜色：灰色；
字体系列：“Roboto”，无衬线；
字体大小：13px；
字体大小：1.3rem；
字体大小：400；
线高：1.8；
保证金：0；
填充：30px0；
文本呈现：优化易读性；
}
@介质（最小宽度：64em）{
身体{
字体大小：14px；
字体大小：1.4rem；
}
}
/* ==========================================================================
#特征
========================================================================== */
/**
*功能/服务面板。每个项目都有一个图标、标题和短文本条目。
*
* 1. 项目的数量可以从5到6更改，因此我将flex direction设置为
*桌面上的“行”（当项目在一行中时），因此项目将始终
*间隔均匀。
* 2. 需要覆盖“对齐项目”，以便图标与
*容器顶部。
*/
.特征{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
保证金：0；
填充：0；
}
.特点：以前，
.特点：之后{
内容：“；
显示：表格；
}
.特点：之后{
明确：两者皆有；
}
@介质（最小宽度：48em）{
.特征{
显示：块；
左边距：-30px；
}
}
@介质（最小宽度：64em）{
.特征{
左边距：0；
显示器：flex；
弯曲方向：行；
调整项目：灵活启动；
}
}
/**
*包含图标、标题和简短内容的每个特色项目的包装
*判决。
*
* 1. 我已经删除了宽度，它总是20%，因为总是有5个项目
*但现在这种情况可以改变了，我们添加了'flex-direction:row；'到
*我们不应该需要它。
* 2. 使项目具有相等的宽度。如果不使用，它们将不均匀。
* 
*/
.功能项目{
背景：无；
框大小：边框框；
保证金：0；
填充：0 65px；
宽度：100%；
最大宽度：500px；
}
.功能项目：在，
.features\u项目：在{
内容：“；
显示：表格；
}
.features\u项目：在{
明确：两者皆有；
}
@介质（最小宽度：48em）{
.功能项目{
浮动：左；
填充：0 95px；
宽度：50%；
最大宽度：无；
}
.features\u项目：第n个子项（奇数）{
清除：左；
}
}
@介质（最小宽度：64em）{
.功能项目{
柔性生长：1；
弹性基准：0；
文本对齐：居中；
填充：0 15px；
宽度：自动；
}
.features\u项目：第n个子项（奇数）{
明确：无；
}
}
.功能\uuuu图标换行{
背景色：青色；
边界半径：100%；
显示：内联块；
高度：50px；
线高：50px；
利润率：0.30px-65 px；
浮动：左；
文本对齐：居中；
宽度：50px；
}
.features\uuu图标-wrap.icon{
填充物：白色；
高度：25px；
宽度：25px；
}
@介质（最小宽度：64em）{
.功能\uuuu图标换行{
浮动：无；
左边距：0；
高度：100px；
线高：100px；
宽度：100px；
}
.features\uuu图标-wrap.icon{
高度：50px；
宽度：50px；
}
}
.功能\uuuu标题{
颜色：黑色；
字体大小：14px；
字体大小：1.4rem；
字号：900；
保证金底部：7.5px；
}
@介质（最小宽度：64em）{
.功能\uuuu标题{
字体大小：16px；
字体大小：1.6rem；
}
}
.功能\uuuu文本{
字体大小：13px；
字体大小：1.3rem；
线高：1.4；
}

同侧阴唇
Lorem ipsum door sit amet，一位杰出的领导者，他是一位临时顾问


同侧阴唇
Lorem ipsum door sit amet，adipiscing elite，sed do eiusmod temporal incident ut laboure and dolore magna aliqua


同侧阴唇
Lorem ipsum door sit amet，一位杰出的领导者，他是一位临时雇员


同侧阴唇
Lorem ipsum door sit amet，Concetetetur adipiscing elite，sed do eiusmod temporal incident ut laboure and dolore magna


同侧阴唇
Lorem ipsum door sit amet，Concetettur adipiscing elite，sed do eiusmod temporal incidedut ut laboure and dolore magna aliqua Lorem ipsum door sit amet

您可以使用flexbox完成此操作。使文本始终居中，图标

flex start

。文本较高时，中心将为e