垂直對齊文本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

回答

相關問題