我正在尝试响应式地在页面上垂直居中图像。我在网上找到了几个解决方案,但没有一个对我有用。图像卡在左上角。任何线索都会很棒。我在敲我的头:)
here is an image of the desired finished page
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img.product1:empty {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div>
<img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" />
</div>
最佳答案
display:table 在 IE8 下工作正常 ...
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-cell;
vertical-align: middle;
text-align: center;
}
img.product1:empty {
/* not too sure what's your idea here , a background defaut, a div sized, generated content inserted ? */
}
<div>
<img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" />
</div>
小弟的简单方法:display:flex;
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img.product1:empty {
/* not too sure what's your idea here , a background defaut, a div sized, generated content inserted ? */
}
<div>
<img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" />
</div>
关于css - 如何使用 CSS 响应式垂直对齐图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33221042/