图标与文本对齐

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;  
}