在站点标题(CSS,HTML)中间播放按钮
我有一个div的id:在站点标题(CSS,HTML)中间播放按钮,html,css,Html,Css,我有一个div的id: #button{ width: 1280px; text-align: center; } #panel{ position:absolute; width: 100%; text-align: center; } <div id="panel"> <img position="absolute" src="http://www.ionixpower.com/wp-content/up
#button{
width: 1280px;
text-align: center;
}
#panel{
position:absolute;
width: 100%;
text-align: center;
}
<div id="panel">
<img position="absolute" src="http://www.ionixpower.com/wp-content/uploads/2014/07/Grass-globe-1-1280x500.jpg">
</div>
<div id="button">
<img src="http://2.firepic.org/2/images/2015-11/07/k9l53oj2fqg7.png">
</div>
#按钮{
宽度:1280px;
文本对齐:居中;
}
#面板{
位置:绝对位置;
宽度:100%;
文本对齐:居中;
}
它包含一个1280像素宽的图像,一个标题图片
我需要在这个图片的中间放一个播放按钮,这样,如果我调整浏览器窗口大小或者放大或缩小,它就不会消失。尽管此按钮需要在大多数现有分辨率中居中
我该怎么做?试试这个
HTML
张贴更多的代码。@ Nead Vrar增加了一些。我确实需要这张图片是可调整的,但按钮仍然应该在中间。图片是响应的,因为<代码>背景大小:封面;<代码>。试试看,你会发现没有,它保持不变。你可以用试试这个来代替背景大小:100%100%代码>
<div id="panel">
<button class="play">Play button</button>
</div>
#panel {
width: 100vw;
height: 100vh;
text-align: center;
position:relative;
background: url('http://placehold.it/1980x960');
background-size: cover;
background-position: center;
}
button {
position: absolute;
top: 50%;
-ms-transform: translate(-35px, -20px);
-webkit-transform: translate(-35px, -20px);
transform:translate(-35px, -20px);
}