html - 如何修复图标对齐？

Question

我正在尝试创建一个简单的 html 页面，但我无法对齐其中一个图标。我不明白我的 CSS 或 HTML 哪里出了问题。

这是我的 html 页面的图片:

.service-icon-container {
  display: table;
  width: 100%;
  height: 80px;
  color: #FCDB7A;
  font-size: 65px;
}

.service-icon-tablecell {
  display: table-cell;
  vertical-align: middle;
}

<div class="col-md-4">
  <div class="single-service-icon">
    <div class="service-icon-container">
      <div class="service-icon-tablecell">
        <img src="img/service-icon-4.jpg" alt="">
      </div>
    </div>

    <h3>Lorem ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt libero, ab repudiandae incidunt dicta eveniet.</p>
  </div>
</div>

Answer 1

尝试使用 CSS grid layout也可以实现相同的UI

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

.item {
  background: #ccc;
  padding: 1em;
}

<div class="container">

  <div class="item">
    <div class="single-service-icon">
      <div class="service-icon-container">
        <div class="service-icon-tablecell">
          <img src="img/service-icon-4.jpg" alt="">
        </div>
      </div>

      <h3>Lorem ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>

  <div class="item">
    <div class="single-service-icon">
      <div class="service-icon-container">
        <div class="service-icon-tablecell">
          <img src="img/service-icon-4.jpg" alt="">
        </div>
      </div>

      <h3>Lorem ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="item">
    <div class="single-service-icon">
      <div class="service-icon-container">
        <div class="service-icon-tablecell">
          <img src="img/service-icon-4.jpg" alt="">
        </div>
      </div>

      <h3>Lorem ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="item">
    <div class="single-service-icon">
      <div class="service-icon-container">
        <div class="service-icon-tablecell">
          <img src="img/service-icon-4.jpg" alt="">
        </div>
      </div>

      <h3>Lorem ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="item">
    <div class="single-service-icon">
      <div class="service-icon-container">
        <div class="service-icon-tablecell">
          <img src="img/service-icon-4.jpg" alt="">
        </div>
      </div>

      <h3>Lorem ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="item">
    <div class="single-service-icon">
      <div class="service-icon-container">
        <div class="service-icon-tablecell">
          <img src="img/service-icon-4.jpg" alt="">
        </div>
      </div>

      <h3>Lorem ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>

</div>