我有一组项目，在下面显示带有标题和文本的图标（图像）。
此主要正常运行。但是，在某些页面上，每个项目都没有一段文字，只有标题。因此，当图标仅在标题旁边水平显示时，当标题对齐顶部时，它看起来很奇怪。
我的问题是，是否有可能将图标居中放置在文本旁边，直到内容高到足以击中图标/容器的顶部？
带有标题和文本（1）的示例：https://codepen.io/moy/pen/YOZyeG
仅带有标题（2）的示例：https://codepen.io/moy/pen/RYpWBp
正如您在示例（1）中在移动设备上看到的那样，当文本填充相同内容时，图标可以很好地响应。
在第二个示例（2）中，标题位于图标顶部，看起来有点废话！
我尝试将标题垂直居中放置在图标旁边，但是当添加文本时，它看起来很奇怪。那么是否有可能将图标居中，直到标题/文本占据足够的垂直空间以击中容器的顶部，然后将其顶部对齐？
或者我需要为内容较少的项目设置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>
答案 0 :(得分：1)
您可以使用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>