如何解决如何使两个子元素垂直居中?
我知道有成千上万的类似案例引用,但是尝试应用解决方案时却看不到我在哪里犯错。 我有一个父元素,该元素在屏幕上分布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
解决方法
尝试一下
.resume-column {
display: flex;
flex-direction: column;
align-items: center;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。