Multiple paragraphs next to Font-Awesome icon and vertically-centered - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL

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

Description

Multiple paragraphs next to Font-Awesome icon and vertically-centered

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamc</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 </head> <!--   ww  w. j  av  a2 s  .  co m-->
 <body translate="no"> 
  <div style="display: table-row;"> 
   <div style="display: table-cell;vertical-align: middle;"> 
    <i class="fa fa-quote-left fa-4x fa-border" style=" "></i> 
   </div> 
   <div style="display: table-cell; vertical-align:middle; word-break: break-all;"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials