HTML Header With Image And Text and Align Text To Bottom - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

HTML Header With Image And Text and Align Text To Bottom

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">

.header {<!--from   w  w w . j  a v a 2s  . c o  m-->
   border:2px solid red;
}
.header .image {
   background: url("https://www.java2s.com/style/demo/Safari.png")
   no-repeat;
   width: 65px;
   height: 65px;
   border:2px solid green;
}
.header .text {
   font: x-large sans-serif;
   border:2px solid blue;
}
.header .image,
.header .text {
   display: inline-block;
   vertical-align: bottom;
}


      </style> 
 </head> 
 <body> 
  <div class="header"> 
   <div class="image"></div> 
   <div class="text">
     Header Text 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials