使導航欄中的圖標和文本垂直對齊（堆疊模式）

Question

如何使導航欄上的文本和圖標垂直對齊。 就像我已經附上圖片：

Answer 1

我終於得到了答案......所以這是其他誰可能是想使類似的情況腳本..

CSS：

<link href="bootstrap/icomoon.css" rel="stylesheet"> 
<style> 

.crozmap-body #crozmap-footer { 
    background: #ed6c09; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 1001; 
} 
.crozmap-body #crozmap-footer ul { 
margin-left: -15px; 
margin-right: -15px; 
list-style: none; 
margin: 0; 
padding: 0; 
} 
.crozmap-body #crozmap-footer ul li { 
position: relative; 
float: left; 
width: 25%; //this is for 4 column 25% 
min-height: 1px; 
padding-left: 0; 
padding-right: 0; 
cursor: pointer; 
height: 50px; 
text-align: center; 
} 
.crozmap-body #crozmap-footer ul li a { 
color: #fff; 
display: block; 
height: 50px; 
text-align: center; 
padding-top: 8px; 
font-size: 13px; 
} 
.crozmap-body #crozmap-footer ul li a:before { 
font-family: "icomoon"; 
color: #fff; 
font-weight: bold; 
font-size: 20px; 
display: block; 
} 

.crozmap-body #crozmap-footer ul li a:hover { 
background-color: #ed9959; 
text-decoration: none; 
} 

.crozmap-body #crozmap-footer ul li a:hover:before { 
background-color: #ed9959; 
} 

</style> 

HTML：

<div id="crozmap-footer"> 
    <ul>  
     <li><a class="icon-share" data-toggle="modal"  data-target="#SharedModal">Share</a> 

     <li><a class="icon-bubble" data-toggle="modal" data-target="#CommentInfoModal"> Comments </a></li> 

     <li><a class="icon-file" data-toggle="modal" data-target="#CommentInfoModal">Info</a></li> 

     <li><a class="icon-location" href="#" >Dir</a></li> 
    </ul> 
</div>