Vertical align two images and some multiline text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Alignment

Description

Vertical align two images and some multiline text

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
* {<!--  ww  w  .  j  a  va2s  .  c o m-->
   box-sizing:border-box;
}

.content-wrapper {
   display:table;
   max-width:801px;
}

.col {
   display:table-cell;
   vertical-align:middle;
   padding:11px;
}

.four {
   width:34.34%
}
</style> 
 </head> 
 <body> 
  <div class="content-wrapper"> 
   <div class="col four"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt=""> 
   </div> 
   <div class="col four"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
   </div> 
   <div class="col four"> 
    <img src="https://www.java2s.com/style/demo/Safari.png" alt=""> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials