在标签文本上定位麻烦

Question

所以

这就是我想要实现的目标：

这就是我所拥有的：http://codepen.io/KieranRigby/pen/QyWZxV。对于下面的代码段，请使用＆＃34;完整页面＆＃34;图。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何让文字标签嵌在底部？

Answer 1

Codepen

在img和label上使用绝对定位，使其在基线上对齐（类似于此SO Answer）。

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

此：

• 为您的.col-md-2容器设置一个设定的高度
• 将您的label元素移至其父.col-md-2
的最底部
• 将img元素移动到其父.col-md-2
底部30px之上

img宽度设置为80％，以在图像之间留出一些空间。