I have encountered a similar issue to many others, but despite trying various solutions, I can't seem to identify where I am going wrong. My parent element is supposed to display 3 blocks of information across the screen, each consisting of a large icon and descriptive text below.
Initially, with the HTML and CSS provided below, everything seems to lay out correctly. However, when I reduce the width of the descriptive text to match the icon's width, it visually adjusts but maintains the original width in the layout. I tried using inline-block and adjusting the values, which worked perfectly. But now, I'm struggling to center the icon and text vertically.
I attempted applying a display: grid to the parent element and positioning them vertically, but I can't figure out how to center them properly. Any assistance and advice would be greatly appreciated.
.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>Here is a link to a CodePen demonstration of my application behavior with images: