CSS垂直对齐文本

我使用的是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>

我添加了

job person name

类，但似乎没有任何效果

---

感谢您的建议。

h3.工作人员姓名是唯一的兄弟姐妹，这就是为什么它没有效果。需要对齐的兄弟姐妹是
离子化身
和
离子行

这仍然不会产生期望的结果，下一步取决于这是否是最终输出。如果是，您可以将
h3
的线条高度设置为化身的高度。
h3。工作人员姓名是唯一的兄弟姐妹，这就是为什么它没有效果。需要对齐的兄弟姐妹是
离子化身
和
离子行

这仍然不会产生期望的结果，下一步取决于这是否是最终输出。如果是，您可以将
h3
的线条高度设置为化身的高度。
您可以使用CSS Flexbox

我无法向您展示确切的内容，但我可以在下面的片段中给出有关结构的想法


.outer{
显示器：flex；
对齐项目：居中；/*用于垂直居中子元素*/
对齐内容：居中；/*用于水平居中子元素*/
填充：20px；
}
.阿凡达{
宽度：50px；
高度：50px；
边界半径：50%；
背景：#000；
右边距：10px；
}

无名氏
您可以使用CSS Flexbox

我无法向您展示确切的内容，但我可以在下面的片段中给出有关结构的想法


.outer{
显示器：flex；
对齐项目：居中；/*用于垂直居中子元素*/
对齐内容：居中；/*用于水平居中子元素*/
填充：20px；
}
.阿凡达{
宽度：50px；
高度：50px；
边界半径：50%；
背景：#000；
右边距：10px；
}

无名氏
Css Flex属性可用于垂直对齐文本


.flex容器{
显示器：flex；
}
.工作人员姓名{
显示器：flex；
对齐项目：居中；
}

阿什顿·马拉斯
Css Flex属性可用于垂直对齐文本


.flex容器{
显示器：flex；
}
.工作人员姓名{
显示器：flex；
对齐项目：居中；
}

阿什顿·马拉斯
感谢所有发帖的人，但我认为您的解决方案可以处理原始html，但由于Ionic标记添加了它自己的内容，我无法让它工作

然而，有效的方法是：

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

谢谢大家发表的文章，但我认为你的解决方案适用于原始html，但因为Ionic标签添加了它自己的内容，所以我无法让它工作

然而，有效的方法是：

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

谢谢你的回复。当你说“设置行高”时，你是指
垂直对齐
还是
高度
属性？两者都不是，我指的是实际的
行高
属性。谢谢你的回答。当您说“设置行高”时，您是指
垂直对齐
还是
高度
属性？两者都不是，我指的是实际的
行高
属性。