如何底部對齊和中心柱的響應圖像

我有這樣的佈局（這是一個頭）：如何底部對齊和中心柱的響應圖像

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-2" style="background-color: aqua; height: 160px;"> 
      <img src="logo.png" class="img-responsive logo"> 
     </div> 
     <div class="col-sm-8" style="background-color: blueviolet; height: 160px;"></div> 
     <div class="col-sm-2" style="background-color: aqua; height: 160px;"></div> 
    </div> 
</div>

什麼，我想實現的是：

對齊標誌至底部和中心
讓圖像負責（設定寬度的柱的80％）

我這樣做：

.logo { 
    position: absolute; 
    width: 80%; 
    left: 10%; 
    right: 10%; 
    bottom: 0; 
}

，但它在某種程度上這麼想的工作，你可以在這裏看到： https://jsfiddle.net/9kauhbhs/2/

來源

2016-01-19 Finn

您的解決方案是工作的罰款。 'div'容器容納圖像的'height'小於'image'。因此您無法看到「底部中心」對齊。嘗試將'height'設置爲'600px'，你會看到它工作。您可以最大限度地減少'圖片'高度或使用適當尺寸的圖片來查看所需的結果。 – pratikpawar

非常感謝@pratikwebdev。如果我做了'body {margin：20px;}'我可以看到它的工作。 – Finn

太棒了！如果你需要，你可以嘗試添加'max-height'元素到95％以克服圖像溢出問題，如果你水平擴展屏幕。如果屏幕是「中」，圖像在「頂部」溢出。 – pratikpawar

你可以試試這個.. https://jsfiddle.net/9kauhbhs/7/

.container{ 
    position:absolute; 
    bottom:0px; 
    height:auto; 
    width:100%; 
    text-align:center; 
} 
.logo { 
    position: relative; 
    width: auto; 
    height:auto; 
    margin:0 auto; 
    max-height:100%; 
    vertical-align:bottom; 
} 


<div class="col-sm-2 text-center" style="background-color: aqua; height: 160px;"> 
    <div class="container"> 
     <img src="http://www.w3schools.com/html/pic_mountain.jpg" class="logo"> 
     </div>  
    </div>

來源

2016-01-19 19:18:12 BlackJack

使用left: 50%和利潤率左爲負一半的圖像寬度。

例如

.logo { 
    position: absolute; 
    width: 80%; 
    left: 50%; 
    bottom: 0; 
    margin-left: calc(-80%/2); 
}

Fiddle

來源

2016-01-19 19:23:39

如何底部對齊和中心柱的響應圖像

回答

相關問題