[英]center absolutely positioned <a> to absolutely positioned image
I try to make text that will be centered in the middle of the image, but the problem is that in my attempts I did not succeed to make it with resizing website. 我尝试使文本居中放置在图像的中间,但是问题是,在尝试调整网站大小时,我没有成功使文本变为中心。 Any suggestions how to fix it and what I do wrong?
任何建议如何解决它,我做错了什么?
* {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .imageSlide-container { position: relative; margin: auto; } .imageSlide { position: absolute; width: 100%; height: auto; opacity: 0; z-index: 1; -webkit-transition: opacity 2.5s; -moz-transition: opacity 2.5s; -o-transition: opacity 2.5s; transition: opacity 2.5s; } .showing { opacity: 1; z-index: 2; } .prev, .next { z-index: 3; position: absolute; top: 50%; width: auto; cursor: pointer; color: red; /*margin-top: -22px;*/ padding: 15px; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8) } @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px}
<div class="imageSlide-container"> <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg"> <a class="prev" onclick="plusSlide-button(-1)">❮</a> <a class="next" onclick="plusSlide-button(1)">❯</a> </div>
this is an updated version using your code from the comments below, i added top:0
to .imageSlide
and solved the slider dropping the last image issue. 这是使用您的代码来自以下注释的更新版本,我在
.imageSlide
添加了top:0
,并解决了删除最后一个图像问题的滑块。
https://jsfiddle.net/k391zyn1/3/ https://jsfiddle.net/k391zyn1/3/
html: 的HTML:
<div class="imageSlide-container">
<img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg">
<img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg">
<img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg">
<a class="prev" onclick="plusSlide-button(-1)">❮</a>
<a class="next" onclick="plusSlide-button(1)">❯</a>
</div>
css: CSS:
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.imageSlide-container {
position: relative;
margin: auto;
}
.imageSlide {
position: absolute;
top:0;
width: 100%;
height: auto;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2.5s;
-moz-transition: opacity 2.5s;
-o-t ransition: opacity 2.5s;
transition: opacity 2.5s;
}
.showing {
position: static;
opacity: 1;
z-index: 2;
}
.prev, .next {
z-index: 3;
position: absolute;
top: 50%;
width: auto;
cursor: pointer;
color: red;
margin-top: -22px;
padding: 15px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8)
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
javascript: javascript:
var slides = document.querySelectorAll('.imageSlide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
function nextSlide(){
slides[currentSlide].className = 'imageSlide';
currentSlide = (currentSlide+1)%(slides.length);
console.log('currentSlide',currentSlide);
slides[currentSlide].className = 'imageSlide showing';
}
I solved it with adding position: static
to .showing, Because the image you see may not be set to position: absolute
, so the code top: 50%
in buttons can come from something. 我通过在.showing上添加
position: static
解决了它,因为您看到的图像可能未设置为position: absolute
,所以按钮中的代码top: 50%
可能来自某物。
* {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .imageSlide-container { position: relative; margin: auto; } .imageSlide { position: absolute; width: 100%; height: auto; opacity: 0; z-index: 1; -webkit-transition: opacity 2.5s; -moz-transition: opacity 2.5s; -o-transition: opacity 2.5s; transition: opacity 2.5s; } .showing { position: static; opacity: 1; z-index: 2; } .prev, .next { z-index: 3; position: absolute; top: 50%; width: auto; cursor: pointer; color: red; margin-top: -22px; padding: 15px; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8) } @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px}
<div class="imageSlide-container"> <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg"> <a class="prev" onclick="plusSlide-button(-1)">❮</a> <a class="next" onclick="plusSlide-button(1)">❯</a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.