垂直對齊圖像

我已經在這裏搜索，但似乎無法找到我的問題的解決方案，由於動態性質的div。垂直對齊圖像

對於我的網站，我想要一個橫幅圖像，可以作爲便宜的kinda響應速度進行縮小。我有這個部分輕拍，我無法讓我的形象垂直居中。我創建了一個jsFiddle，代碼如下。

HTML

<div class="banner col-lg-12"> 
    <img src="http://laurentvandessel.be/wp-content/uploads/2014/03/placeholder.png" /> 
</div>

CSS

.banner { 
    margin-top: 51px; 
    margin-bottom: 20px; 
    overflow:hidden; 
    text-align: center; 
    height:300px; 
    display: inline-block; 
    vertical-align: middle; 
} 

.banner img { 
    position:relative; 
    width:100%; 
    left: 100%; 
    margin-left: -200%; 
    display:inline-block; 
    vertical-align: middle; 
}

另外，如果你有做什麼，我已經在做的是一個更好的辦法將是十分讚賞。

感謝堆傢伙。

來源

2014-06-19 Joshua

退房這樣的回答：http://stackoverflow.com/questions/18516317/vertically-align-an -image-inside-a-div-with-responsive-height/18516474＃18516474 –

這有點棘手，因爲有時圖像比容器更高。你可以不喜歡這樣，雖然（見最後三行）：如果適合

.banner img { 
    position:relative; 
    width:100%; 
    left: 100%; 
    margin-left: -200%; 
    display:inline-block; 
    vertical-align: middle; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

，你還不如使用水平居中這個方法太：

.banner img { 
    position:relative; 
    width:100%; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

來源

2014-06-19 07:00:47

謝謝，我用你的las一個解決方案。完美無缺地完成工作。 – Joshua

你需要動態div高度img與動態高度！設置你的CSS

.banner{height:auto; ...}

，如果你需要的文本垂直中心，並平鋪格也圖像，你可以看看我的jsFiddle測試。

來源

2014-06-19 07:03:26

Demo

CSS

.banner { 
    margin-top: 51px; 
    margin-bottom: 20px; 
    /*overflow:hidden; 
    text-align: center;*/ 
    height:300px; 
    /*display: inline-block; 
    vertical-align: middle;*/ 
    background: url(http://laurentvandessel.be/wp-content/uploads/2014/03/placeholder.png) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
/*.banner img { 
    position:relative; 
    width:100%; 
    left: 100%; 
    margin-left: -200%; 
    display:inline-block; 
    vertical-align: middle; 
}*/

HTML

<div class="banner col-lg-12"> 
    <!--<img src="http://laurentvandessel.be/wp-content/uploads/2014/03/placeholder.png" />--> 
</div>

來源

2014-06-19 07:06:08 4dgaurav

垂直對齊圖像

回答

相關問題