https://i.sstatic.net/Atian.pngI'm facing an issue with aligning 3 icons. My goal is to align them, but every time I attempt something, the first icon ends up in the middle of the page instead of the second icon where I want it to be.
.item-icon {
width: 10%;
position: relative;
display: inline-block;
text-align: center;
left: 50%;
top: 50%;
}
.item-image {
font-size: 70px;
}
<div class="plan">
<div class="item-icon">
<div class="item-image">
<i class="far fa-lightbulb"></i>
</div>
<div class="item-text">
<p></p>
</div>
</div>
<div class="item-icon">
<div class="item-image">
<i class="fas fa-code"></i>
</div>
<div class="item-text">
<p></p>
</div>
</div>
<div class="item-icon">
<div class="item-image">
<i class="fas fa-upload"></i>
</div>
<div class="item-text">
<p></p>
</div>
</div>