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>

我还给了您一个Codepen链接，其中包含应用程序的行为，但包含图像

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

Answer 1

尝试一下

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

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

1 个答案: