title: Aligning text in div vertically
body: <p>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:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ion-view view-title="TITLE" ng-popstate="onPopState($state)"&gt;
      &lt;ion-content class="background-change" scroll="true" has-bouncing="false"&gt;
          &lt;div class="this-dir"&gt;
              &lt;div class="dir-icon"&gt;&lt;i ng-class="theIcon"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class="dir-icon"&gt;&lt;i ng-class="theIcon"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class="dir-icon"&gt;&lt;i ng-class="theIcon"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class="dir-text"&gt;&lt;strong&gt;BLAHA&lt;/strong&gt;&lt;/div&gt;
              &lt;div class="dir-icon"&gt;&lt;i ng-class="theIcon"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class="dir-icon"&gt;&lt;i ng-class="theIcon"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class="dir-icon"&gt;&lt;i ng-class="theIcon"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Angular controller:</p>
  
  <pre><code>if (($scope.transaction.transaction[direction].destination_id) &gt; ($scope.transaction.transaction[direction].origin_id)) {
      $scope.theIcon = "ion-android-arrow-forward";
  } else {
      $scope.theIcon = "ion-android-arrow-back";
  }
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/kNW1h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kNW1h.png" alt="Result"></a></p>
  
  <p>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 <code>vertical-align:middle;</code> with <code>table-cell</code> but that only made all the text and the cells move to the left. I also tried using <code>margin-top</code> and <code>padding-top</code> on the inner divs but that only moved all arrows and the text simultaneously.</p>