Mix vertically-centered elements with different font sizes and retain consistent line height - HTML CSS CSS Property

HTML CSS examples for CSS Property:font-size

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. font-size

Description

Mix vertically-centered elements with different font sizes and retain consistent line height

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">
body<!--  w  ww . ja va 2s . c o m-->
 {
   line-height:21px;
   font-size:15px;
}

.smaller
 {
   font-size:13px;
   vertical-align:middle;
   line-height:13px;
}

.abcd span {
   text-decoration:underline;
}
</style> 
 </head> 
 <body> 
  <div class="body"> 
   <div class="why-not-twenty-px">
     Lorem ipsum dolor sit amet, 
    <span class="smaller">Lo</span>Lorem ipsum dolor s 
   </div> 
   <div class="abcd"> 
    <span>Lorem ipsum dolor sit</span> 
    <span style="vertical-align:middle;color:grey;">Lorem ipsum dol</span> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper</span> 
   </div> 
   <div class="why-not-sixty-px">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. A 
    <span class="smaller">L</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials