Centering icons on website - html

Question

I have a problem.
I would like to center three icons on a website like so:
http://prntscr.com/cte4kt
Including the text under it.
I have searched on google, but I had no good results.
If somebody could show a simple example that would be really greatfull.
this is what I tried:
<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
Thankyou.

Answer 1

I think you already know some basic HTML/CSS stuff so I'd recommend you use some of popular front-end frameworks like Bootstrap or Zurb Foundation. It's almost copy/paste only thing.

Answer 2

You can use something like bootstrap or primercss which give you classes to add rows and columns to layout your content.
You could also create your own like the example I did 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;
}
Basically you need to create some type of layout container(width:100%) with three columns split by thirds(width:33.3%). Then inside each of those columns you position the contents with (text-align:center) to horizontally center align the content and vertically align it via something like top:30% or if you could also do an inline-block with vertical-align: middle.