ウェブサイトのアイコンのセンタリング

Question

私は問題があります。

私はそうのようなウェブサイト上の3つのアイコンを中央したいと思います。その下にテキストを含む http://prntscr.com/cte4kt

。

Googleで検索しましたが、良い結果はありませんでした。 誰かが本当に素晴らしいと思われる簡単な例を表示できたら、

これは私が試したものです：

<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のようなものを使うと、行と列を追加してコンテンツをレイアウトすることができます。あなたはまた、私はあなたがレイアウトコンテナのいくつかのタイプを作成する必要があります。基本的

<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; 
} 

hereをした例のように独自に作成することができ

：3分の1に分割する3つの列を持つ（幅100％）（幅：33.3％ ）。これらの各列の中でコンテンツを（text-align：center）で配置してコンテンツを水平方向に整列させ、top：30％のような方法で垂直方向に整列させるか、vertical-alignでインラインブロックを行うことができます：中間。