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

Question

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

下面我给大家展示的html和css原则上是按照自己的意愿来排版的，但是当我把描述文字的宽度变小的时候，就和原来一样了宽度作为图标，虽然我在视觉上应用它，但它仍然尊重布局的原始宽度。然后我包含内联块并完美地调整值。但是我已经到了无法在中心对齐图标和文本的地步。我试过将 display: grid 应用于父亲，将它们垂直放置，但我找不到将它们居中的方法。预先感谢您的帮助和时间

.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>

我还给你留下了一个代码笔 link，其中包含我的应用程序的行为，但带有图像

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

Answer 1

试试这个

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

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

How to vertically center two child elements?

html

css

display