Align 3 divs horizontally with their icons - html

Question

I've looked at this answer and a few similar ones, but still struggling with alignment.
I have 3 divs in a parent div. Each div has a font-awesome icon and text.
Currently the alignment is spaced evenly horizontally, but with gaps between text and icons. I need each div's text next to the icon.
What I have:
[ icon text icon text icon text ]
What I need:
[ icon text icon text icon text ]
Code:
.question-instructions {
background-color: #3eb6a9;
margin: 0px 0px 0px;
}
.question-line {
margin: 0px auto;
white-space: nowrap;
text-align: center;
}
.question-block {
margin: 10px 0 30px;
align-content: center;
vertical-align: middle;
/*display: inline-block; */
}
.block1 {
/* float: left;*/
}
.block2 {
/*display:inline-block;*/
}
.block3 {
/*float: right;*/
}
<div class="container">
<div class="row">
<div class="question-instructions">
<div class="row text-center">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 ">
<h2>MY TITLE</h2>
</div>
</div>
<div class="row question-line">
<div class="col-lg-4 col-md-4 col-sm-4 question-block block1">
<div class="pull-left"><i class="fa fa-group fa-fw fa-3x question-icon"></i>
</div>
<h4>My first text</h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 question-block block2">
<a class="pull-left" href="#">
<i class="fa fa-question fa-fw fa-3x question-icon"></i>
</a>
<h4 class="">My second text</h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 question-block block3">
<div class="pull-left"><i class="fa fa-graduation-cap fa-fw fa-3x question-icon"></i>
</div>
<h4>My third text</h4>
</div>
</div>
</div>
</div>
</div>
I've tried:
adding float left and right to the two divs on the ends and switching the html around so the floats are first and then the centre. Didn't work.
If I remove the text-align: center css property from the .question-line then the text is against the icons how it should be, but everything is then left aligned in the parent div and not centered. I get this then:
[ icon text icon text icon text ]
I've tried display: table-cell on the icons and the h4. also not working.

Answer 1

I made a few changes in your code, see code bellow :
.question-instructions {
background-color: #3eb6a9;
margin: 0px 0px 0px;
}
.question-line {
margin: 0px auto;
white-space: nowrap;
text-align: center;
}
.question-block {
margin: 10px 0 30px;
align-content: center;
vertical-align: middle;
/*display: inline-block; */
}
.block1 {
/* float: left;*/
}
.inline-block {
display: inline-block;
}
.block3 {
/*float: right;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="question-instructions">
<div class="row text-center">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 ">
<h2>MY TITLE</h2>
</div>
</div>
<div class="row question-line">
<div class="col-lg-4 col-md-4 col-sm-4">
<i class="fa fa-group fa-fw fa-3x question-icon"></i>
<h4 class="inline-block">My first text</h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 ">
<i class="fa fa-question fa-fw fa-3x question-icon"></i>
<h4 class="inline-block">My second text</h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 ">
<i class="fa fa-graduation-cap fa-fw fa-3x question-icon"></i>
<h4 class="inline-block">My third text</h4>
</div>
</div>
</div>
</div>
</div>

Answer 2

Here is updated code. text-align did the trick. Check in "full page" mode to see the effect. http://i.imgur.com/KAYkTMp.png
.question-instructions {
background-color: #3eb6a9;
margin: 0px 0px 0px;
width: 100%;
}
.question-line {
margin: 0px auto;
white-space: nowrap;
text-align: center;
}
.question-block {
margin: 10px 0 30px;
vertical-align: middle;
white-space: nowrap;
}
.block1 {
/* float: left;*/
}
.block2 {
/*display:inline-block;*/
}
.block3 {
/*float: right;*/
}
<div class="container">
<div class="row">
<div class="question-instructions">
<div class="row text-center">
<div class="col-lg-12 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 ">
<h2>MY TITLE</h2>
</div>
</div>
<div class="row question-line">
<div class="col-lg-4 col-md-4 col-sm-4 question-block block1">
<div style="display: inline-block;">
<i class="fa fa-group fa-fw fa-3x question-icon pull-left"></i>
<h4 class="pull-left">My first text</h4>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 question-block block2">
<div style="display: inline-block;">
<i class="fa fa-question fa-fw fa-3x question-icon pull-left"></i>
<h4 class="pull-left">My second text</h4>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 question-block block3">
<div style="display: inline-block;">
<i class="fa fa-graduation-cap fa-fw fa-3x question-icon pull-left"></i>
<h4 class="pull-left">My third text</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Answer 3

Check this fiddle.
CSS
.question-instructions {
background-color: #3eb6a9;
margin: 0px 0px 0px;
}
.question-line {
margin: 0px auto;
white-space: nowrap;
text-align: left;
}
.question-block {
margin: 10px 0 30px;
align-content: center;
vertical-align: middle;
}
.question-block h4{
display: inline-block;
}
.block {
float: left;
}