垂直对齐离子图标和文本

Question

我想发布一种日期选择器，日期在中间，并左/右切换上一个或下一个日期。我目前在格式化视图时遇到问题。我想垂直对齐离子图标（左和右）和文本{{displayDate}}。我试过跟随但没有我想要的结果。

HTML

   <ion-footer>
        <div style="position: fixed; bottom: 0px; width: 100%">
        <ion-list>
          <ion-item text-center style="align-content: center!important">
              <ion-icon name="md-arrow-dropleft"  style="font-size: 30px; margin-right: 10px"></ion-icon>
            <b> {{displayDate}} </b>
            <ion-icon name="md-arrow-dropright" style="font-size: 30px; margin-left: 10px"></ion-icon>
          </ion-item>
        </ion-list>
        </div>
          <ion-toolbar>
          </ion-toolbar>
        </ion-footer>

CSS

b {
  color: #387ef5;
    font-family: 'Helvetica Neue', sans-serif;
    }

目前的样子：

Answer 1

试试这个！希望这对你有用！

b {
  color: #387ef5;
  font-family: 'Helvetica Neue', sans-serif;
  vertical-align: middle;
}

Answer 2

b {
  color: #387ef5;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 30px;
}