DIV with display: inline-block containing image and text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

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

Description

DIV with display: inline-block containing image and 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">
.page {<!--from  www.  j a va 2s . c o  m-->
   position:relative;
}

.page:after {
   content:'';
   display:block;
   height:21px;
   padding-bottom:6%;
}

.footer {
   position:absolute;
   left:0;
   right:0;
   bottom:0;
   height:21px;
   padding-bottom:6%;
}

.footer-menu {
   position:absolute;
   left:0;
   right:0;
   bottom:0;
   height:100%;
   font-size:0;
}

.menu-item {
   display:inline;
   vertical-align:top;
   height:100%;
   margin-left:6%;
   white-space:nowrap;
   cursor:pointer;
}

.item-icon {
   vertical-align:middle;
   width:auto;
   height:100%;
}

.item-name {
   vertical-align:middle;
   padding:0 0 0 2em;
   font-family:Arial, Helvetica, sans-serif;
   font-size:3vw;
   line-height:2.3;
   white-space:nowrap;
}
</style> 
 </head> 
 <body> 
  <div class="page"> 
   <div class="something">
     Lorem ipsum do 
   </div> 
   <div class="footer"> 
    <div class="footer-menu"> 
     <div class="menu-item"> 
      <img src="https://www.java2s.com/style/demo/Opera.png" alt="" class="item-icon"> 
      <span class="item-name">Lorem ipsum</span> 
     </div> 
     <div class="menu-item"> 
      <img src="https://www.java2s.com/style/demo/Opera.png" alt="" class="item-icon"> 
      <span class="item-name">Lorem ipsum</span> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials