Center an image in html while having text to the immediate left of it - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Media

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Media

Description

Center an image in html while having text to the immediate left of it

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <title>Lorem ipsum dolor</title> 
 </head> <!--   w  w w  .  ja va  2 s. c o  m-->
 <body background="https://www.java2s.com/style/demo/Google-Chrome.png"> 
  <style type="text/css">
.floatDiv {
   float:left;
   margin:11px;
}
</style> 
  <h1 align="center">Lorem ip</h1> 
  <div class="floatDiv"> 
   <img src="https://www.java2s.com/style/demo/InternetExplorer.png" height="300" width="450" vspace="20"> 
  </div> 
  <div class="floatDiv"> 
   <h3>Lorem ipsu</h3> 
   <ul type="circle"> 
    <li>Lorem ipsum dolor sit a</li> 
    <li>Lorem ipsum dolor sit amet, consectet</li> 
    <li>Lorem ipsum dolor sit amet, cons</li> 
    <li>Lorem ipsum dolor sit amet, cons</li> 
   </ul> 
  </div> 
  <div class="floatDiv"> 
   <h3>Lorem ipsum dolor sit </h3> 
   <ul type="circle"> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing el</li> 
    <li>Lorem ipsum dolor sit amet, consectetur </li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisc</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing el</li> 
    <li>Lorem ipsum dolor sit amet, consectetur ad</li> 
   </ul> 
  </div> 
  <div class="floatDiv"> 
   <h3>Lorem ipsum dolor sit</h3> 
   <ul type="circle"> 
    <li>Lorem ipsum dolor sit amet, co</li> 
    <li>Lorem ipsum dolor sit amet, co</li> 
    <li>Lorem ipsum dolor sit amet, consectetur a</li> 
    <li>Lorem ipsum dolor sit amet, consectetu</li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials