Image goes with text in header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

Image goes with text in header

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.header-wrapper {<!--from  w ww. j a  v a  2s. co m-->
   width: 100%;
   padding: 3% 0;
   background-color: green;
}
.main-header {
   width: 70%;
   margin: 0 auto;
   display: table
}
.main-header img {
   float: left;
   padding-right: 10%;
   vertical-align: middle;
   display: table-cell;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="header-wrapper"> 
   <header class="main-header"> 
    <img src="https://www.java2s.com/style/demo/Safari.png" alt="Home Styles Logo"> 
   </header> 
  </div>  
 </body>
</html>

Related Tutorials