html - 文本未与顶部对齐

Question

The text is aligned to the bottom of the iconfont

我不知道为什么名称文本与图标字体的底部对齐。我想将文本与 div .profile-info 的顶部对齐:

html

  <div class="profile">
    <i class="profile-pic fa fa-user-circle" aria-hidden="true"></i>
    <div class="profile-info">
      <p class="name">John Doe</p>
      <p class="user-type">Admin</p>
    </div>
  </div>

CSS

.profile
  display: table
  padding: 15px

  .profile-pic
    display: table-cell
    font-size: 40px
    padding-right: 10px

  .profile-info
    display: table-cell
    .name
      margin-bottom: 0
      position: relative
    .user-type
      color: grey

Answer 1

您必须将其垂直对齐到顶部。用这个

.profile-info
    display: table-cell
    vertical-align: top