圖標與文本對齊

Question

我正在使用linearicons，我試圖對齊圖標與文本（垂直），我只是無法弄清楚..不知何故該圖標不粘在導航欄頂部像所以我認爲這可能是問題所在。 下面是一個圖片告訴你什麼是我說的 - >

http://i.imgur.com/fwX8fHM.png

我試圖與文本垂直對齊的圖標，然後用導航欄的整個菜單。我希望你們明白。

這裏的HTML：

<div class="navbar navbar-default top-bar"> 
    <div class="container"> 
    <div class="infos pull-right"> 

     <span class="lnr lnr-clock infos-icons"></span> 
     <p class="infos-text">Mon-Fri: 08:00 - 12:00</p> 
     <span class="divider-vertical"></span> 

     <span class="lnr lnr-envelope infos-icons"></span> 
     <p class="infos-text">mail.example.com</p> 
     <span class="divider-vertical"></span> 

     <span class="lnr lnr-phone infos-icons"></span> 
     <p class="infos-text">(880)123-456-7890</p> 

    </div> 
    </div> 
</div> 

，我試圖將它們對齊後所擁有的CSS：

.top-bar { 
margin-bottom: 0; 
border: none; 
background-color: #9E87FF; 
color: #fff; 
height: 50px; 
} 

.navbar .divider-vertical { 
    height: 50px; 
    margin: 0 9px; 
    border-left: 1px solid #ffffff; 
    border-right: 1px solid #ffffff; 
} 

.infos-text { 
    display: inline-block; 
} 

.infos .infos-icons { 
    padding-right: 10px; 
    font-size: 20px; 
    vertical-align: middle; 
    display: inline-block; 
} 

Answer 1

使用此CSS

.top-bar { 
    margin-bottom: 0; 
    border: none; 
    background-color: #9E87FF; 
    color: #fff; 
    height: 50px; 
    display: table-cell; 
    vertical-align: middle; 
} 

.navbar .divider-vertical { 
    height: 50px; 
    margin: 0 9px; 
    border-left: 1px solid #ffffff; 
    border-right: 1px solid #ffffff; 
} 

.infos-text { 
    display: inline-block; 

} 

.infos .infos-icons { 
    padding-right: 10px; 
    font-size: 20px;  
    display: inline-block;  
}