垂直对齐 div 中的文本
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;
}
Angular 控制器:
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
,但这只会同时移动所有箭头和文本。
将vertical-align: middle
添加到.dir-icon 和.dir-text,并将行高添加到.dir-text 等于.dir-icon 的高度。
工作Fiddle:https://jsfiddle.net/199n5d6t/(为图标添加了宽度、高度和背景颜色以提高可见性,您可以忽略它)
为 <strong>
元素添加 class 并使用以下 CSS:
strong.ClassName {
vertical-align: super;
}
您必须将文本的行高设置为等于图标的高度,然后垂直对齐文本,如 Leon 所说。
我正在开发一个使用离子元素的应用程序。我正在使用图标来显示一些东西,但遇到了问题。这是我的代码:
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;
}
Angular 控制器:
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
,但这只会同时移动所有箭头和文本。
将vertical-align: middle
添加到.dir-icon 和.dir-text,并将行高添加到.dir-text 等于.dir-icon 的高度。
工作Fiddle:https://jsfiddle.net/199n5d6t/(为图标添加了宽度、高度和背景颜色以提高可见性,您可以忽略它)
为 <strong>
元素添加 class 并使用以下 CSS:
strong.ClassName {
vertical-align: super;
}
您必须将文本的行高设置为等于图标的高度,然后垂直对齐文本,如 Leon 所说。