垂直对齐div中的文本

Question

我正在开发一款使用离子元素的应用。我正在使用图标来显示一些东西，并遇到了问题。这是我的代码：

HTML：

<ion-view view-title="TITLE" ng-popstate="onPopState($state)">
    <ion-content class="background-change" scroll="true" has-bouncing="false">
        <div class="this-dir">
            <div class="dir-icon"><i ng-class="theIcon"></i></div>
            <div class="dir-icon"><i ng-class="theIcon"></i></div>
            <div class="dir-icon"><i ng-class="theIcon"></i></div>
            <div class="dir-text"><strong>BLAHA</strong></div>
            <div class="dir-icon"><i ng-class="theIcon"></i></div>
            <div class="dir-icon"><i ng-class="theIcon"></i></div>
            <div class="dir-icon"><i ng-class="theIcon"></i></div>
        </div>
    </ion-content>
</ion-view>

CSS：

.this-dir {
  margin: 0px auto;
  padding-top: 10px;
  text-align: center;
  background-color: #fff;
  border-top: 1px solid #dedede;
}
.this-dir .dir-icon {
  display: inline-block;
  text-align: center;
  padding: 0px 2px;
  font-size: 20px;
}
.this-dir .dir-text {
  display: inline-block;
  text-align: center;
  padding: 0px 3px;
}

角度控制器：

if (($scope.transaction.transaction[direction].destination_id) > ($scope.transaction.transaction[direction].origin_id)) {
    $scope.theIcon = "ion-android-arrow-forward";
} else {
    $scope.theIcon = "ion-android-arrow-back";
}

结果如下：

正如您所看到的，文本当前在图标的底部对齐，但我希望它在中间对齐。我尝试将vertical-align:middle;与table-cell一起使用，但只使所有文本和单元格向左移动。我还尝试在内部div上使用margin-top和padding-top但是只同时移动了所有箭头和文本。

Answer 1

将vertical-align: middle添加到.dir-icon和.dir-text，并将.dir-text的行高添加到等于.dir-icon的高度。

工作小提琴：https://jsfiddle.net/199n5d6t/（为图标添加了宽度，高度和背景颜色以供查看，您可以忽略这一点）

Answer 2

为<strong>元素添加类并使用以下CSS：

strong.ClassName {
    vertical-align: super;
}

Answer 3

你必须设置文本的行高等于图标的高度，然后垂直对齐文本，如Leon所说。