在Div的垂直中心对齐图像

Question

如何在div的中心垂直对齐我的图像？我现在拥有的是这样的：

正如您可以看到最后一幅图像垂直居中，我希望以与第三张图像相同的方式放置另外两张图像。我的代码：

    <!-- container -->
<div class="container">
    <div class="banner-text">
        <h3>Services</h3>
        <p>Ut mollis rhoncus porttitor. Nulla facilisi. Nulla eget est fringilla, malesuada ligula non, scelerisque enim. Fusce dui ex, accumsan at viverra nec, suscipit eget tortor.</p>
    </div>
    <div class="banner-bottom-grids">
        <div class="col-md-4 banner-bottom-grid">
            <div class="services-icon">
                <span ><img src="images/nomobile1.png"  aria-hidden="true" /></span>
            </div>
            <h4>Aliquam nulla mauris</h4>
            <p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry. </p>
        </div>
        <div class="col-md-4 banner-bottom-grid red">
            <div class="services-icon">
                <span ><img src="images/remind1.png"  aria-hidden="true" /></span>
            </div>
            <h4>Mauris pellentesque</h4>
            <p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry. </p>
        </div>
        <div class="col-md-4 banner-bottom-grid green">
            <div class="services-icon">
                <span class="glyphicon glyphicon-th-large glyphicon-thumbs-up" aria-hidden="true"></span>
            </div>
            <h4>Praesent vitae quam</h4>
            <p>Lorem Ipsum is simply Ipsum has been the industry's text of the printing and typesetting industry. </p>
        </div>
        <div class="clearfix"> </div>
    </div>  
</div>
<!-- //container -->