3x3圆圈图标网格，标题为

Question

我正在寻找在我的网站上添加3x3网格圆圈图标的方法。每个图标都需要包含标题文本（包括子标题文本）并且间隔均匀。中心图标需要位于网页的中心。

我很遗憾在过去的几个小时里一直困扰着，我不知道如何实现这一目标。我将不胜感激任何帮助。

Answer 1

这里主要是一个带有方形单元格和居中内容的弹性框网格，可以均匀地分隔圆圈/文本。

* {
  box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 90%;
  margin: auto;
  background: #eee;
}
.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
}
.cell:before {
  padding-bottom: 100%;
  display: block;
  content: '';
}
.circle {
  background: #ccc;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 0 auto 1em;
}
.inner {
  text-align: center;
}

<div class="grid">
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>        
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="inner">
      <div class="circle"></div>
      <div class="caption">
        <h2>text</h2>
        <h3>sub</h3>
      </div>
    </div>
  </div>
</div>