如何通过水平父块将图标居中？

Question

我有以下内容：

<div class="class-journal-mobile-navigation-move left">
<i class="material-icons"> arrow_back_ios</i>
</div>

.class-journal-mobile-navigation-move {
    border-radius: 50%;
    border: 1px solid #3e4eb8;
    width: 50px;
    height: 50px;
    display: table;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.class-journal-mobile-navigation-move i {
    font-size: 24px;
    color: #3e4eb8;
    display: table-cell;
    text-align: center;
}

我需要将i元素在父块中居中放置，现在看起来像这样：

应用更改后，现在显示为：

Answer 1

您可以使用flexbox：

代替显示：表；对于课堂新闻移动导航，

h1, p {
  font-family: Lato;
}

.class-journal-mobile-navigation-move {
      border-radius: 50%;
      border: 1px solid #3e4eb8;
      width: 50px;
      height: 50px;
      /* display: table; */
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      display: flex;
      align-items: center;
      justify-content: center;
  }

  .class-journal-mobile-navigation-move i {
      font-size: 24px;
      color: #3e4eb8;
      /* display: table-cell; */
      text-align: center;
  }

  <div class="class-journal-mobile-navigation-move left">
  <i class="material-icons"><</i>
  </div>

Answer 2

您必须使用vertical-align

.class-journal-mobile-navigation-move {
    border-radius: 50%;
    border: 1px solid #3e4eb8;
    width: 50px;
    height: 50px;
    display: table;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.class-journal-mobile-navigation-move i {
    font-size: 24px;
    color: #3e4eb8;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 14px;
}

<div class="class-journal-mobile-navigation-move left">
<i class="material-icons"> arrow_back_ios</i>
</div>

在这里您可以详细了解vertical-align

Answer 3

添加以下几行：

.class-journal-mobile-navigation-move {
   display: flex;
   align-items:center;
   justify-content:center;
}