如何将字体真棒图标对齐到中间

Question

Hi我在调整3个图标方面遇到了问题。我想对齐它们，但每次我尝试这样的东西时，第一个图标从页面中间开始，但我想要第二个图标。

.item-icon {
  width: 10%;
  position: relative;
  display: inline-block;
  text-align: center;
  left: 50%;
  top: 50%;
}

.item-image {
  font-size: 70px;
}

<div class="plan">
  <div class="item-icon">
    <div class="item-image">
      <i class="far fa-lightbulb"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>
  <div class="item-icon">
    <div class="item-image">
      <i class="fas fa-code"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>
  <div class="item-icon">
    <div class="item-image">
      <i class="fas fa-upload"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>

Answer 1

添加这些规则虽然有点棘手。

为div.plan

.plan {
    font-size 0:
}

为div.item-icon

.item-icon {
        width: 33.33333%;
        font-size: 1rem;
        text-align: center;
}

Answer 2

尝试保证金：自动而不是设置宽度。应自动调整每侧的边距以使其居中。

.item-icon {
    position: absolute;
    left: 50%;
    }

.item-image {
    position: relative;
    left: -50%;
    display: inline-block;
}
.plan {
    position: relative;
}

Answer 3

.plan {
  text-align: center;
}

.item-icon {
  display: inline-block;
  position: relative;
  width: 25%;
}

Answer 4

.plan {
    text-align: center;
    padding: 24px 0; // optional vertical padding
    margin: 0 -24px; // optional horizontal padding  offset
}

.item-icon {
    position: relative;
    display: inline-block;
    padding: 0 24px; // optional horizontal padding
}

https://codepen.io/themeler/pen/QQoGMa

您已尝试将图标置于图标容器（.item-icon）中，但容器的大小为图标，因此无法按预期工作。您还尝试将每个图标从左侧和顶部定位50％。这也行不通。

.plan应该是你的图标容器，中心文本和图标显示为'内联块'，因此居中会影响它们。

我已经为.plan（垂直填充）和图标容器本身添加了额外的填充（水平填充，以使它们分开）。