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或primercss之类的东西，它们可以为您添加行和列来布置内容。

您也可以像我做的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％的内容垂直对齐，或者如果还可以使用vertical-align执行内联块：中间。

在网站上的中心图标

2 个答案: