Html 图标与文本对齐

我使用的是线性符号，我试图将图标与文本（垂直）对齐，但我无法理解。。不知怎的，图标没有像文本一样粘贴在导航栏的顶部，所以我认为这可能是问题所在。 这里有一张图片向您展示我所说的->

我试图将图标与文本垂直对齐，然后将整个菜单与导航栏对齐。我希望你们能理解

以下是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;
    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;      
}

---

欢迎来到stack overflow，当你问问题时，请试着做一把小提琴。谢谢如果我尝试这个例子，它已经垂直对齐了。。。

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