Align 3 divs horizontally with their icons

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.

Hari Das · Answer 1 · 2017-05-02T09:27:23.120

Here is updated code. text-align did the trick. Check in "full page" mode to see the effect. https://i.stack.imgur.com/ghUUb.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">

Chiller · Accepted Answer · 2017-05-02T09:36:04.123

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>

you're missing the class question-block on each div. And if it's added, everything looks weird. Or should I ignore it? — louisav, May 02 '17 at 09:19
@louisav You can get the wanted result without using this class .. so i suggest to remove it ..unless you want something else i'm not aware of — Chiller, May 02 '17 at 09:24
I need the margins in there for the rest of the html that follows. But I've added it now and it works thanks. Only problem now is that your icons are too small. I need it at that fa-3x size. — louisav, May 02 '17 at 09:31
@louisav I set the size to 20px in .question-instructions i just for the example, so you can use remove it and add your own class and size..i edited my answer and removed it — Chiller, May 02 '17 at 09:35

score 0 · Answer 3 · answered May 02 '17 at 09:05

0

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

answered May 02 '17 at 09:05

ajinkya narkar

384
1
4

unfortunately it's not aligned evenly in the green div. Gap on the right is too big. – louisav May 02 '17 at 09:36

Align 3 divs horizontally with their icons

3 Answers3