Positioning trouble on label text

Question

So

This is what I am trying to achieve:

This is what I have: http://codepen.io/KieranRigby/pen/QyWZxV. For the snippet bellow, please use "Full page" view.

label {
 color: #6d6e70;
 bottom: 0;
}
.img-row img {
    width: 100%;
}
.img-row {
  text-align: center;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container img-row">

  <div class="row">
    <div class="col-md-2 col-xs-12 col-sm-12 col-md-offset-1">
      <img id="img-1" class="img-responsive" src="http://i.imgur.com/ftaEZS9.png" />
      <label for="img-1">Make your essay</label>
    </div>
    <div class="col-md-2">
      <img id="img-2" class="img-responsive" src="http://i.imgur.com/7YUtBZk.png" />
      <label for="img-2">Upload your essay</label>
    </div>

    <div class="col-md-2">
      <img id="img-3" class="img-responsive" src="http://i.imgur.com/Hy84vQC.png" />
      <label for="img-3">Choose your pay</label>
    </div>
    <div class="col-md-2">
      <img id="img-4" class="img-responsive" src="http://i.imgur.com/tSqCUuO.png" />
      <label for="img-4">Mentors Check</label>
    </div>
    <div class="col-md-2">
      <img id="img-5" class="img-responsive" src="http://i.imgur.com/VmwzHFD.png" />
      <label for="img-5">Receive an email</label>
    </div>
  </div>
  <!-- /.row -->

</div>

How do I get the text labels to sit inline at the bottom?

They are inline and at the bottom. Can you please clarify the issue? — Joseph Marikle, Dec 05 '15 at 23:01
If you see on the image, they all line up horizontally. I need the text to all be in line. — Kieran Rigby, Dec 05 '15 at 23:11
See: http://imgur.com/TRYhCKt The bottom of the text should touch the baseline — Kieran Rigby, Dec 05 '15 at 23:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Codepen

Use absolute positioning on your img and label to align them on the baseline (similar to this SO Answer).

New CSS

.col-md-2 {
  height: 250px;
}
.col-md-2 img {
  position: absolute;
  bottom: 30px;
  width: 80%;
}
.col-md-2 label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

This:

Gives your .col-md-2 containers a set height
Moves your label element to the very bottom of its parent .col-md-2
Moves your img element 30px above the bottom of its parent .col-md-2

The img width is set to 80% to give some space between images.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 06 '15 at 00:29

adriancarriger

2,970
3
19
26

Perfect! Thanks a lot! – Kieran Rigby Dec 06 '15 at 01:09

Positioning trouble on label text

1 Answers1

Codepen

New CSS