我使用CSS-Tricks中解释的垂直居中技术:http://css-tricks.com/centering-in-the-unknown
我有一个需要在div中垂直居中的图像。它似乎在除移动Safari / iOS之外的每个平台上都能正常工作,其中图像被放置在视野之外。我似乎无法解决导致此问题的移动Safari上的怪癖或合规性问题。
以下是CodePen中的问题:http://codepen.io/anon/pen/iDalc
这是我的HTML和CSS
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Durga%2C_Burdwan%2C_2011.JPG/1920px-Durga%2C_Burdwan%2C_2011.JPG">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Upper_Antelope_Canyon_Heart_Formation_2013.jpg/640px-Upper_Antelope_Canyon_Heart_Formation_2013.jpg">
</div>
</a>
</div>
</div>
<div class="headline">
<div class="wrapper">
<a>
<div class="background">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg/1920px-Maly_Krashokholmsky_bridge_4exp_Oloneo.jpg">
</div>
</a>
</div>
</div>
我的CSS:
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
有人可以建议移动Safari中发生什么CSS问题吗?到目前为止,我已经诊断出它可能与变换有关:translate-Y属性。所有移动Safari测试都在设备和iOS模拟器上完成。
提前致谢!
答案 0 :(得分:0)
对于在任何搜索中遇到此问题的任何人,我都设法自行修复此问题。将.background img更改为position:absolute;并离开:0;
我不完全理解发生了什么,但无论它修复了什么。我还想补充一点,我在原帖中错了。在某些地方,我将CSS Tricks归功于我实施的垂直居中技术,这不是实际的来源。我引用了以下网址:http://davidwalsh.name/css-vertical-center
更新了CodePen:http://codepen.io/anon/pen/zJugd
.headline {
background: gray;
padding: 0 3.125%;
width: 93.75%;
margin-left: auto;
margin-right: auto;
max-width: 768px;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 190px;
width: 100%;
margin-bottom: 2px;
}
.background {
position: absolute;
top: 0;
height: 100%; width: 100%;
z-index: 1;
background-color: #000;
text-align: center;
}
.background img {
width: 100%;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.background:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}