I'm having trouble centering an icon vertically inside its box only. I've tried using vertical-align: middle; but it doesn't seem to be working. I also attempted the line-height method, but the icon has an outer border that stays attached to the top when it moves down, making it appear stretched. Here's what I mean:
What I want it to look like is this:
I've watched several tutorials on YouTube where they use display:flex with vertical-align, but nothing seems to work for me! I really want to grasp a general understanding of how this works... Here is my HTML code:
<section id="stories">
<div class="container">
<div class="row">
<div class="col-md-6">
<i class="fas fa-play"></i>
</div>
<div class="col-md-6">
<div class="successbox">
<h2>Success stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>
</div>
</div>
</div>
</section>
And here is my CSS:
#stories{
background : url("http://demo.themefisher.com/educenter/images/backgrounds/success-story.jpg");
padding: 60px 0px;
}
#stories i{
font-size: 20px;
color :#fff;
background-color : #ffbc3b;
padding:40px;
border-radius: 100%;
display: table-cell;
vertical-align: middle;
}