Centering Text (vertical-align or padding)?

Question

So I'm having some trouble centering some text with an image, I have put the script below:

<li>
    <div class="member">
        <div class="image">
            <img src="http://i.imgur.com/vSZyVru.jpg" alt="">
        </div>
        <div class="info">
            <h4>       Bill Nye</h4>
            <p>
                    Researcher and journalist
            </p>
            <ol class="social">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ol>
        </div>
    </div>
</li>

I'm not sure whether to use something like vertical-align or padding? Any help is appreciated!

Answer 1

Two methods

CSS Tables (or an actual table if preferred)

 html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; } ol { list-style: none; } .member { display: table; margin: 1em; } .member .image, .member .info { display: table-cell; vertical-align: middle; border: 1px solid grey; padding: 1em; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="member"> <div class="image"> <img src="http://i.imgur.com/vSZyVru.jpg" alt=""> </div> <div class="info"> <h4> Bill Nye</h4> <p> Researcher and journalist </p> <ol class="social"> <li><a href="#"><i class="fa fa-facebook"></i></a> </li> <li><a href="#"><i class="fa fa-linkedin"></i></a> </li> </ol> </div> </div> 

Flexbox

 html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; } ol { list-style: none; } .member { display: inline-flex; margin: 1em; } .member .image, .member .info { flex: 1; display: flex; flex-direction: column; justify-content: center; border: 1px solid grey; padding: 1em; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="member"> <div class="image"> <img src="http://i.imgur.com/vSZyVru.jpg" alt=""> </div> <div class="info"> <h4> Bill Nye</h4> <p> Researcher and journalist </p> <ol class="social"> <li><a href="#"><i class="fa fa-facebook"></i></a> </li> <li><a href="#"><i class="fa fa-linkedin"></i></a> </li> </ol> </div> </div>