无法将图像垂直对齐底部

Question

我试图将图片对齐在页面底部。 div是100％高度但垂直对齐：底部似乎不起作用。

JSFiddle Here

HTML：

<div class="container-fluid">
<div class="row" id="bg">
  <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="pic">
    <div class="leftlayer-gradient hidden-md hidden-lg text-center">
      <img src="https://imageog.flaticon.com/icons/png/512/3/3907.png" class="down-image">
    </div>
  </div>
</div>

CSS：

#pic {
  background-image:url("left.jpeg");
  background-size: cover;
  background-position: right;
}

.leftlayer-gradient {
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* Standard syntax (must be last) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.down-image {
  height: 8vh;
  vertical-align: bottom;
  border: 0;
}

Answer 1

我认为你没有正确使用垂直对齐。

将图像设置为绝对位置，将底部值设置为0：

.down-image {
    bottom: 0;
    position: absolute;
}

#pic {
  background-image: url("left.jpeg");
  background-size: cover;
  background-position: right;
}
.leftlayer-gradient {
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* Standard syntax (must be last) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.down-image {
  position: absolute;
  height: 8vh;
  bottom: 0;
  border: 0;
}

<div class="container-fluid">
  <div class="row" id="bg">
    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="pic">
      <div class="leftlayer-gradient hidden-md hidden-lg text-center">
        <img src="https://imageog.flaticon.com/icons/png/512/3/3907.png" class="down-image">
      </div>
    </div>
  </div>

Answer 2

只需将position: absolute和bottom: 0添加到图片中：

.down-image {
  width: 50px;
  vertical-align: bottom;
  border: 0;
  position: absolute;
  bottom: 0;
}

预览

输出：http://jsbin.com/govujikumi/1/edit?html,css,output