Aligning ul li elements, image and text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

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

Description

Aligning ul li elements, 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">
#main .content ul li {
   padding-bottom:11px;
   padding-top:11px;
   clear:both;
}

#main .content ul li a img {
   float:left;
   width:100px;
   height:100px;
   margin:0 11px 11px 0;
}
</style> <!--from   w ww. ja  v a2s.  c  o m-->
 </head> 
 <body> 
  <div id="main"> 
   <div class="content"> 
    <h2>PARLOUR PRODUCTS</h2> 
    <p>Parlour uses only the best. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ipsum vitae metus rutrum sed viverra lacus vulputate.</p> 
    <ul> 
     <li> <p> <a href="#"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="Parlour uses Bumble &amp; Bumble"> </a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a rutrum turpis. Nunc nibh lacus, facilisis quis tristique nec, accumsan ac est. </p> </li> 
     <li> <p> <a href="#"> <img src="https://www.java2s.com/style/demo/Safari.png" alt="Parlour uses Bumble &amp; Bumble"> </a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a rutrum turpis. Nunc nibh lacus, facilisis quis tristique nec, accumsan ac est. </p> </li> 
     <li> <p> <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Parlour uses Bumble &amp; Bumble"> </a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a rutrum turpis. Nunc nibh lacus, facilisis quis tristique nec, accumsan ac est. </p> </li> 
     <li> <p> <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Parlour uses Bumble &amp; Bumble"> </a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a rutrum turpis. Nunc nibh lacus, facilisis quis tristique nec, accumsan ac est. </p> </li> 
    </ul> 
   </div> 
   <!-- end content --> 
  </div> 
  <!-- end main -->  
 </body>
</html>

Related Tutorials