垂直对齐图像

我已经在这里搜索，但似乎无法找到我的问题的解决方案，由于动态性质的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

垂直对齐图像

回答

相关问题