Align font awesome icon in the middle of select element's height - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Font awesome

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Font awesome

Description

Align font awesome icon in the middle of select element's height

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
  <style id="compiled-css" type="text/css">
div {<!--   w ww .j a va  2  s  .  c o  m-->
   display:table
}

a {
   display:table-cell;
   vertical-align:middle;
}
</style> 
 </head> 
 <body> 
  <div> 
   <select size="10"></select> 
   <a href="#"> <i class="fa fa-times-circle" aria-hidden="true"></i> </a> 
  </div>  
 </body>
</html>

Related Tutorials