我有一组项目，在下面显示带有标题+文字的图标（图像）。
这大部分工作正常。但是在某些页面上，每个项目都没有一段文字，只有一个标题。因此，当图标水平显示在标题旁边时，当标题与顶部对齐时，它看起来很奇怪。
我的问题是，是否可以将图标放在文本旁边，直到内容高到足以触及图标/容器的顶部？
标题+文本示例（1）：https://codepen.io/moy/pen/YOZyeG
仅带标题（2）的示例：https://codepen.io/moy/pen/RYpWBp
正如您在移动设备上的示例（1）中所看到的，图标可以很好地响应，因为文本填充相同。
在第二个例子（2）中，标题位于图标的顶部，看起来有点废话！
我已经尝试将标题垂直居中放在图标旁边，但是当添加文本时，它看起来很奇怪。那么是否可以将图标居中，直到标题/文本占据足够的垂直空间以击中容器的顶部，然后它将是顶部对齐的？
或者我需要有两个不同的类，如.features，然后.features--centred或.features--no-text的内容没有那么多的项目？
在此先感谢，在这里结束自己！
/**
* Base `html` styling.
*/
html {
background: white;
font-size: 62.5%;
}
/**
* Base `body` styling.
*/
body {
background-color: white;
color: grey;
font-family: "Roboto", sans-serif;
font-size: 13px;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.8;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
@media (min-width: 64em) {
body {
font-size: 14px;
font-size: 1.4rem;
}
}
/* ==========================================================================
#FEATURES
========================================================================== */
/**
* Features/service panel. Each item has an icon, title and short text entry.
*
* 1. The number of items can change from 5 - 6, so I've set flex-direction to
* 'row' on desktop (when the items are in a row) so the items will always be
* spaced evenly.
* 2. Need to overwrite `align-items` so the icons are vertically aligned to the
* top of the container.
*/
.features {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.features:before,
.features:after {
content: "";
display: table;
}
.features:after {
clear: both;
}
@media (min-width: 48em) {
.features {
display: block;
margin-left: -30px;
}
}
@media (min-width: 64em) {
.features {
margin-left: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
}
}
/**
* The wrapper for each featured item that contains an icon, title and short
* sentence.
*
* 1. I've removed the width, which was always 20% as there were always 5 items
* but now that can change and we've added `flex-direction: row;` to the
* parent div we shouldn't need it.
* 2. Make items have equal widths. If not applied they'll be uneven.
*
*/
.features__item {
background: none;
box-sizing: border-box;
margin: 0;
padding: 0 0 0 65px;
width: 100%;
max-width: 500px;
}
.features__item:before,
.features__item:after {
content: "";
display: table;
}
.features__item:after {
clear: both;
}
@media (min-width: 48em) {
.features__item {
float: left;
padding: 0 0 0 95px;
width: 50%;
max-width: none;
}
.features__item:nth-child(odd) {
clear: left;
}
}
@media (min-width: 64em) {
.features__item {
flex-grow: 1;
flex-basis: 0;
text-align: center;
padding: 0 15px;
width: auto;
}
.features__item:nth-child(odd) {
clear: none;
}
}
.features__icon-wrap {
background-color: teal;
border-radius: 100%;
display: inline-block;
height: 50px;
line-height: 50px;
margin: 0 0 30px -65px;
float: left;
text-align: center;
width: 50px;
}
.features__icon-wrap .icon {
fill: white;
height: 25px;
width: 25px;
}
@media (min-width: 64em) {
.features__icon-wrap {
float: none;
margin-left: 0;
height: 100px;
line-height: 100px;
width: 100px;
}
.features__icon-wrap .icon {
height: 50px;
width: 50px;
}
}
.features__title {
color: black;
font-size: 14px;
font-size: 1.4rem;
font-weight: 900;
margin-bottom: 7.5px;
}
@media (min-width: 64em) {
.features__title {
font-size: 16px;
font-size: 1.6rem;
}
}
.features__text {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.4;
}<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900|Roboto:400,400i,700,700i" rel="stylesheet">
<ul class="features">
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--24-hour"><use xlink:href="img/sprite/sprite.svg#icon-24hour"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--room"><use xlink:href="img/sprite/sprite.svg#icon-room"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--rosette"><use xlink:href="img/sprite/sprite.svg#icon-rosette"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--taxi"><use xlink:href="img/sprite/sprite.svg#icon-taxi"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--ticket"><use xlink:href="img/sprite/sprite.svg#icon-ticket"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet.</p>
</li>
</ul>您可以使用flexbox执行此操作。您可以使文本始终居中，并使图标flex-start。当文字较高时，中心将相当于flex-start。
这是一个简化的例子：
.box {
max-width: 320px;
display: flex;
align-items: flex-start;
border: 1px solid;
}
.icon {
width: 80px;
height: 80px;
background: teal;
margin-right:10px;
border-radius: 50%;
flex-shrink: 0;
}
.text {
align-self: center;
border: 1px solid;
}
h3,p {
margin: 5px 0;
}<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel orci orci. Suspendisse ultrices velit sit amet venenatis venenatis. Pellentesque non leo nec ipsum pulvinar aliquet ut ac lorem</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
<p>orem ipsum dolor sit amet, </p>
</div>
</div>