[英]Aligning text in div vertically
I'm developing an app that uses ionic elements. 我正在开发一个使用离子元素的应用程序。 I'm using icons to show some stuff, and have encountered a problem. 我正在使用图标显示一些内容,并且遇到了问题。 This is my code: 这是我的代码:
HTML: 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: 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 controller: 角度控制器:
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";
}
This is the result: 结果如下:
As you can see, the text is currently aligned at the bottom of the icons, but I want it to be aligned at the middle. 如您所见,文本当前在图标的底部对齐,但我希望文本在图标的中间对齐。 I've tried using vertical-align:middle;
我试过使用vertical-align:middle;
with table-cell
but that only made all the text and the cells move to the left. 使用table-cell
但这只会使所有文本和单元格向左移动。 I also tried using margin-top
and padding-top
on the inner divs but that only moved all arrows and the text simultaneously. 我还尝试在内部div上使用margin-top
和padding-top
,但这只能同时移动所有箭头和文本。
Add vertical-align: middle
to .dir-icon and .dir-text, and add a line-height to .dir-text equal to the height of .dir-icon. 在.dir-icon和.dir-text上添加vertical-align: middle
在.dir-text上添加等于.dir-icon的高度的行高。
Working Fiddle: https://jsfiddle.net/199n5d6t/ (added a width, height, and and background color to the icons for visibility, you can ignore this) 工作小提琴: https : //jsfiddle.net/199n5d6t/ (为可见性在图标上添加了宽度,高度和背景颜色,您可以忽略此设置)
Add class for the <strong>
element and use the following CSS: 为<strong>
元素添加类,并使用以下CSS:
strong.ClassName {
vertical-align: super;
}
您必须将文本的行高设置为等于图标的高度,然后垂直对齐文本,如Leon所说。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.