Aligning image to the left of a paragraph - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Align

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

Description

Aligning image to the left of a paragraph

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">
#intro {<!-- www.  j  av a  2s . c  o m-->
   width:91%;
   background-color:Chartreuse;
   padding:6%;
}

#intro>* {
   vertical-align:middle;
}

#pic {
   height:81px;
   width:81px;
   background:black;
   display:inline-block;
}

#p {
   display:inline-block;
   width:81%;
}
</style> 
 </head> 
 <body> 
  <div id="intro"> 
   <div id="pic"></div> 
   <p id="p">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> 
  </div>  
 </body>
</html>

Related Tutorials