0

How can I vertically align my images in center of a div? What I have right now is looks like this: current state

As you can see the last image is correctly centered vertically, I want to place my other two images in same manner as 3rd image. My code:

    <!-- 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 -->
j08691
  • 204,283
  • 31
  • 260
  • 272
remy boys
  • 2,928
  • 5
  • 36
  • 65
  • 1
    Your images all appear to be centred in their respective divs, Could you please be more specific as to how you would like them to appear? – Aserian Aug 15 '16 at 20:45
  • can you see the 3rd image ? the thumb image (which is basically not an image ) ` – remy boys Aug 15 '16 at 20:46
  • Possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) – User Aug 15 '16 at 20:47
  • alright @EddieHart your link's answer says `#demo { background: url(bg_apple_little.gif) no - repeat center center; height: 200px; width: 200px; }` but can you explain where to put this ? – remy boys Aug 15 '16 at 20:48
  • @remyboys I see what you mean. Did you try
    in your parent div?     – Aserian Aug 15 '16 at 20:51
  • hey man @Aserian you mean something like this ?? `
    ` ???     – remy boys Aug 15 '16 at 20:56
  • @remyboys Yeah, your code would look like: If that doesn't work, try moving it into the inner div. – Aserian Aug 15 '16 at 20:59
  • no man both didnt worked @Aserian – remy boys Aug 15 '16 at 21:02
  • Looks like my comment was a little naive, try this: http://phrogz.net/CSS/vertical-align/index.html – Aserian Aug 15 '16 at 21:09

0 Answers0