Search code examples
htmlcssvertical-alignment

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:

<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 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:

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; with table-cell but that only made all the text and the cells move to the left. I also tried using margin-top and padding-top on the inner divs but that only moved all arrows and the text simultaneously.

Solution

  • 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.

    Working Fiddle: https://jsfiddle.net/199n5d6t/ (added a width, height, and and background color to the icons for visibility, you can ignore this)