如何垂直居中两个子元素？ [复制]

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>

我还给你一个 codepen 链接，其中包含我的应用程序的行为，但带有图像

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

Answer 1

试试这个

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