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）。 希望能帮助到你。 感谢

Answer 2

您可以使用 CSS Flexbox 。

我无法向您展示确切的内容，但我可以在下面的代码段中了解结构。

.outer {
  display: flex;
  align-items: center; /* Used for vertical centering child elements */
  justify-content: center; /* Used for horizontal centering child elements */
  padding: 20px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000;
  margin-right: 10px;
}

<div class="outer">
  <div class="avatar"></div>
  <div class="name">John Doe</div>
</div>

希望这有帮助！

Answer 3

h3.job-person-name是唯一的兄弟姐妹，这就是它无效的原因。需要对齐的兄弟姐妹是ion-avatar和ion-row。

这仍然不会产生预期的结果，下一步取决于这是否是最终输出。如果是，您可以将h3的行高设置为头像的高度。

Answer 4

感谢发布的所有人，但我认为您的解决方案适用于原始HTML，但由于Ionic标签添加了它自己，我无法使其工作。

但是有什么用呢：

.job-person-name {
  padding-top: 21px;
}