如何将两个子元素垂直居中

Question

我知道有一千个类似案例的引用，但在尝试应用解决方案时，我看不出我犯了什么错误。我有一个父元素，它在屏幕上分布了3个信息块，由一个大图标和下面的描述性文本组成。

原则上，对于我在下面展示的html和css，我会按照自己的意愿进行布局，但当我减少描述性文本的宽度，使其与图标的宽度相同时，尽管我在视觉上应用了它，但它仍然尊重布局中的原始宽度。然后我包括内联块并完美地调整值。但我已经到了无法将图标和文本居中对齐的地步。我试着在父亲身上应用一个显示：网格，垂直定位，但我找不到居中的方法。提前感谢您的帮助和时间

.options-resume {
display: flex;
justify-content: center;
}
.resume-subtitle {
color: #666b74;
font-weight: bold;
font-size: 38px;
padding: 45px 0 45px 0;
}
.resume-column {
display: inline-grid;
}
.resume-icons {
display: flex;
justify-content: space-around;
}
.resume-subtitle {
display: inline-block;
font-family: 'RalewayRegular';
font-size: 14px;
color: #666b74;
position: relative;
width: 58%;
text-align: center;
}
.icon-credit-card {
font-size: 220px;
}
.icon-support {
font-size: 220px;
}
.icon-phone {
font-size: 220px;
}

<div class="options-resume">
<h1 class="resume-subtitle">How to center vertically ?</h1>
</div>
<div class="resume-icons">
<div class="resume-column">
<label>
<i class="icon-credit-card"></i>
</label>
<p class="resume-subtitle">Lorem Ipsum is simply dummy text of the printing and typesett</p>
</div>
<div class="resume-column">
<label>
<i class="icon-phone"></i>
</label>
<p class="resume-subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="resume-column">
<label>
<i class="icon-support"></i>
</label>
<p class="resume-subtitle">Lorem Ipsum is simply dummy text of the prin</p>
</div>
</div>

我也给你留下了一个代码笔链接，与我的应用程序的行为，但与图像

https://codepen.io/CharlieJS/pen/VwaKRZj

Answer 1

试试这个

.resume-column {
display: flex;
flex-direction: column;
align-items: center;
}