在网站上居中图标

Question

我有问题。

我想在网站上将三个图标居中，如下所示： http://prntscr.com/cte4kt

包括它下面的文字。

我在谷歌上搜索过，但没有得到好的结果。 如果有人能展示一个简单的例子，那就太好了。

这是我尝试过的：

<div class="testDiv">
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>

<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>

<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>

CSS： http://pastebin.com/v0cc1cXg

谢谢。

Answer 1

我认为您已经了解了一些基本的 HTML/CSS 知识，因此我建议您使用一些流行的前端框架，例如 Bootstrap 或 Zurb Foundation。这几乎只是复制/粘贴而已。

Answer 2

您可以使用诸如 bootstrap 或 primecss 之类的东西来为您提供类来添加行和列来布局您的内容。

您也可以像我在here 所做的示例一样创建自己的

<div class="container">
    <div class="row">
        <div class="col3 center">
          <div class="inner-container">
            <i>icon</i>
            <div>text</div>
      </div>
    </div>
    <div class="col3">
      <div class="inner-container">
        <i>icon</i>
        <div>text</div>
      </div>
    </div>
    <div class="col3">
      <div class="inner-container">
        <i>icon</i>
        <div>text</div>
      </div>
    </div>
   </div>
</div>

.container {
  position: relative;
  width: auto;
  height: 200px;
}

.row {
  width: 100%;
  height: 100%;
}

.col3 {
  float: left;
  width: 33.3%;
  height: 100%;
  background: grey;
}

.inner-container {
  position: relative;
  top: 30%;
  text-align: center;
}

基本上，您需要创建某种类型的布局容器（宽度：100%），其中三列被三分之二（宽度：33.3%）分割。然后在每一列中，您使用 (text-align:center) 定位内容以水平居中对齐内容并通过类似 top:30% 的方式垂直对齐它，或者如果您也可以使用垂直对齐进行内联块：中间。