0

I'm trying to center an icon but only vertically inside its box. I tried vertical-align : middle; but it seem not to work. I also tried the line-height method but the icon have an outside border and when it goes down the border stay sticky to the top so it looks stretched. It's something like that : enter image description here

And i want it to look like that :

enter image description here

i watched some tutorials on youtube they use display:flex with vertical-align, but nothing seem to work! I really want to understand how it works generally... Here's my html 

<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 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;
}
Mehdi Jilali
  • 17
  • 6

1 Answers1

0

Try this:

    .row {
    display: flex;
    align-items: center;
    }

Using flexbox gives you a lot of FLEXiblity with positioning, you should check it out:

https://www.w3schools.com/css/css3_flexbox.asp

Diego
  • 187
  • 4
  • 1
    I switched from flexbox to grid in most cases. Sometimes I combine them. Examples: https://jsfiddle.net/fowbmz7t/10/ For learning both, I recommend: https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Fide Apr 23 '20 at 19:37
  • Absolutely, combining them makes for some powerful and beautiful layouts. Great resource, @Fide. – Diego Apr 23 '20 at 19:38