html - 如何通过水平父 block 使图标居中？

Question

我有以下 block :

<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;
}

我需要在父 block 中将 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>