Verticle align inside <li>

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<ul class="clearfix">
	<li><i class="fa fa-star"></i><span>Accounts Payable / Recievable</span><a class="fa fa-times-circle"></a></li>
	<li><i class="fa fa-star"></i><span>Administrative Associate</span><a class="fa fa-times-circle"></a></li>
	<li><i class="fa fa-star"></i><span>Administrative secretary</span><a class="fa fa-times-circle"></a></li>
</ul>

CSS

ul {
    margin-top: 50px;
    list-style-type: none;
}

li {
    width: 185px;
    line-height: 30px;
    display: table;
    
    background-image: linear-gradient(bottom, rgb(212,212,212) 0%, rgb(255,255,255) 44%);
    background-image: -o-linear-gradient(bottom, rgb(212,212,212) 0%, rgb(255,255,255) 44%);
    background-image: -moz-linear-gradient(bottom, rgb(212,212,212) 0%, rgb(255,255,255) 44%);
    background-image: -webkit-linear-gradient(bottom, rgb(212,212,212) 0%, rgb(255,255,255) 44%);
    background-image: -ms-linear-gradient(bottom, rgb(212,212,212) 0%, rgb(255,255,255) 44%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(212,212,212)), color-stop(0.44, rgb(255,255,255)) );
    background: -ms-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8', GradientType=0 );
    border: 1px solid #b7b7b7;
    border-radius: 5px;
    box-shadow: 1px 2px 2px #999;
    padding: 5px 10px 3px 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 12px;
}

li i,
li span,
li a {
     display: table-cell;
}

li span {
    line-height: 14px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}