1

I know there are a thousand references to similar cases but trying to apply the solutions I do not see where I am making the mistake. I have a parent element that distributes across the screen 3 blocks of info composed by a large icon and a descriptive text below.

In principle with the html and css that I show you below, I layout it as I want, but when I reduce the width of the descriptive text, so that it has the same width as the icon, although I apply it visually, it still respects the original width in layout. Then I include the inline-block and adjust the value perfectly. But I have reached the point where I am not able to align the icon and text in the center. I have tried applying a display: grid to the father, positioning them vertically but I can't find a way to center them. Thanks in advance for your help and time

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

I leave you also a codepen link with the behavior of my application but with images

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

Hao Wu
  • 17,573
  • 6
  • 28
  • 60
homerThinking
  • 785
  • 3
  • 11
  • 28

1 Answers1

2

Try this

.resume-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
Rohan Lamb
  • 141
  • 5