[英]Aligning text in div vertically
我正在開發一個使用離子元素的應用程序。 我正在使用圖標顯示一些內容,並且遇到了問題。 這是我的代碼:
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
,但這只能同時移動所有箭頭和文本。
在.dir-icon和.dir-text上添加vertical-align: middle
在.dir-text上添加等於.dir-icon的高度的行高。
工作小提琴: https : //jsfiddle.net/199n5d6t/ (為可見性在圖標上添加了寬度,高度和背景顏色,您可以忽略此設置)
為<strong>
元素添加類,並使用以下CSS:
strong.ClassName {
vertical-align: super;
}
您必須將文本的行高設置為等於圖標的高度,然后垂直對齊文本,如Leon所說。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.