Center aligned vertically the text with image - 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

Center aligned vertically the text with image

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">
.column-resources-box {<!--from   w  ww . j a  va  2 s .  co m-->
   width:201px;
   float:left;
   margin:16px;
}

.link {
   text-decoration:none;
   display:block;
}

.image {
   display:inline-block;
   margin:0px 6px 0px 0px;
   height:51px;
   width:51px;
}

h4.title-bar {
   display:inline-block;
   color:Chartreuse;
   background:none;
   font-family:'Arial', inherit;
   font-weight:normal;
   text-transform:none;
   margin:0 0 0 0;
   vertical-align:top;
   padding:9px 0px 0px 0px;
   text-align:left;
   height:51px;
   line-height:21px;
}
</style> 
 </head> 
 <body> 
  <div class="column-resources-box"> 
   <a class="link" href="http://en.wikipedia.org/wiki/Apple"> <img class="image" src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="Apples"> <h4 class="title-bar">Lorem i<br>Lorem ip</h4> </a> 
   <ul> 
    <li>Lore</li> 
    <li>Lorem ips</li> 
    <li>Lore</li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials