Struggling to center an icon with text? Trying to achieve alignment of SVG + text while utilizing Bootstrap? You're not alone. Don't worry - I have the solution. Check out my before and after samples: Before After But here are some questions that need answers:
- How can the text be perfectly centered?
- How do you align the svg icon with the text seamlessly?
Thanks
<section class="perks">
<img src="./media/blueCircle.svg" alt="" />
<div class="container">
<div class="row">
<div class="col perksFirst">Perks of Meetlete</div>
<div class="w-100"></div>
<div class="row perksList">
<div class="col">Access to our secure video platform!</div>
<div class="col">
<img src="./media/2.svg" alt="" />Calls are executed through our App!
</div>
<div class="w-100"></div>
<div class="col">Meetlete calls take place on your time!</div>
<div class="col">None of your information is shared!</div>
<div class="w-100"></div>
<div class="col">Build loyalty with your fans!</div>
<div class="col">Make lifetime memories!</div>
<div class="w-100"></div>
<div class="col">Earn up to 10x more than other platforms!</div>
<div class="col">Meetlete calls are timed!</div>
</div>
<div class="w-100"></div>
<div class="col">
<button class="earlyAccess btn">Early access</button>
<div class="launchDate">Launching 2/14/21!</div>
</div>
</div>
</div>
</section>
.perks {
display: flex;
margin-top: 310px;
position: relative;
}
.perks .earlyAccess {
margin-top: 117px;
}
.perks img {
position: absolute;
left: 0;
top: -50%;
}
.perks .row {
justify-content: center;
}
.perksList {
max-width: 860px;
display: flex;
justify-content: center;
align-items: center;
}
.perksList .col {
font-weight: 600;
font-size: 18px;
display: flex;
align-items: center;
display: flex !important;
text-align: start;
margin-top: 26px;
}
.perksFirst {
margin-bottom: 77px;
font-size: 24px;
font-weight: 700;
}
.launchDate {
font-weight: 700;
font-size: 18px;
margin-top: 26px;
}