無法獲取圖像垂直對齊底部

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