我试图让图像看起来有一个以中心为单位的播放按钮.我不知道主图像的确切尺寸,因为它是动态生成的.
现在,重叠图像(播放按钮)位于左上角.播放按钮如何显示水平和垂直居中？
谢谢.
<div class="videoBox"> <img src="/mainimage.png"> <span></span> </div> .videoBox { position: relative; } .videoBox span { position:absolute; left: 0px; bottom: 0px; width: 100%; height: 100%; z-index: 1; background: transparent url(../img/elements/playbutton.png) no-repeat; }
解决方法
.videoBox span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: url(../img/elements/playbutton.png) no-repeat center center; }
