Vertically center align images in dynamic heightRSS

• • Reply
  ganesh88madd...

  Member

  4 Points

  45 Posts

  Vertically center align images in dynamic height

  Feb 13, 2017 05:32 AM|ganesh88maddy|LINK

  Vertically center align images in dynamic height

  I've dynamic height for one div in that i need Vertically center align multiple images inside that div.

   <div class="row ">
  
                  <div class="col-md-1">
                   
                          <img src="images/img1.png"  />
                          <img src="images/img2.png"  />
                          <img src="images/img3.png"  />
                          <img src="images/img4.png"  />
                          <img src="images/img5.png"  />
                    
                  </div>
  </div>

  I tested css display-table  and flex but no result. if any Javascript or Jquery thats fine
    

• • Reply
  raju dasa

  All-Star

  15176 Points

  3888 Posts

  Re: Vertically center align images in dynamic height

  Feb 14, 2017 04:58 AM|raju dasa|LINK

  Hi,

  Try using vertical-align:middle css rule

  or, check the solution here: http://stackoverflow.com/questions/18649106/div-vertical-align-middle-css

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  rajudasa-tech
• • Reply
  JiyaoLee

  Member

  600 Points

  262 Posts

  Re: Vertically center align images in dynamic height

  Feb 14, 2017 09:26 AM|JiyaoLee|LINK

  Hi ganesh88maddy,
  

  ganesh88maddy

  ve dynamic height for one div in that i need Vertically center align multiple images inside that div.

  Do you mean that the multiple images have different height?
  I create a demo, and hope to help you,

  1. It is the page, the image is in the div container. The "container" div will show vertically center align

  <div class="row vertical-center">
      <div class="container">
          <img src="http://i.imgur.com/Kc5utAv.gif" />
      </div>
      <div class="container">
          <img src="http://i.imgur.com/TFQa4i2.jpg" />
      </div>
      <div class="container">
          <img src="http://i.imgur.com/ZnORaVo.jpg" />
      </div>
  </div>

  2. Add style(vertical-center)

  <style type="text/css">
  .vertical-center {
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-) */
  display: flex;
  align-items: center;
  }
  </style>

  
  Regards,
  JiyaoLee

  We are trying to better understand customer views on social support experience. Click HERE to participate the survey. Thanks!