CSS 垂直对齐文本

Question

我正在使用 Ionic 2，并且有以下内容:

如您所见，文本“Ashton marais”并未与图像垂直居中。我如何使用 css 实现这一点？

html

<ion-item>
  <ion-avatar (click)="addPhoto()" item-left class="wrapper wrapper-job">
    <img [src]="jobModel.avatar64 ? jobModel.avatar64 : 'images/blank-profile-picture.png'">
    <P *ngIf="!fromSearch && personModelLoggedIn && jobModel.person.id === personModelLoggedIn.id">EDIT</P>
  </ion-avatar>
  <ion-row>
    <ion-col>
      <h3 class="job-person-name">Ashton Marais</h3>
    </ion-col>
  </ion-row>
</ion-item>

CSS

.job-person-name {
    vertical-align: middle;
}

我添加了job-person-name类，但是好像没有什么效果。

感谢任何建议。

Answer 1

Css Flex 属性可用于垂直对齐文本。

.flex-container {
  display: flex;
}
.job-person-name {
  display: flex;
  align-items: center;
}

<div class="flex-container">
  <img src="http://lorempixel.com/400/200/">
  <h3 class="job-person-name">Ashton Marais</h3>
</div>

导致:

这是上图的代码。(http://codepen.io/dpes/pen/gLPjmQ)。希望能帮助到你。谢谢