垂直对齐文本div

我正在开发一个使用离子元素的应用程序。我使用图标来显示一些内容，并且遇到了问题。这是我的代码：垂直对齐文本div

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，但只能同时移动所有箭头和文本。

来源

2016-03-14 BluePrint

您不需要制作元素表格单元格，将垂直对齐应用于它们，因为它们是内联块，它们已受其影响。 – CBroe

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

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

来源

2016-03-14 16:37:08 Leon

它工作得很好，虽然我需要在'.dir-icon'上添加'line-height'，它也可以工作。 – BluePrint

添加类为<strong>元素，并使用下面的CSS：

strong.ClassName { 
    vertical-align: super; 
}

来源

2016-03-14 16:41:44 rJ7

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

来源

2016-03-14 16:45:42

垂直对齐文本div

回答

相关问题