我正在尝试为网页创建一个图像滑块，我已经得到了它的功能，但我想把它移动到页面的中心。
最初我试图在.image-container {上使用top: 50%;来做到这一点，但是我发现这减少了图像大小(见之前和之后的图片):
实施top: 50%;前:https://cdn.discordapp.com/attachments/629793987498082326/989474251104997386/unknown.png
实现top: 50%;后:https://cdn.discordapp.com/attachments/629793987498082326/989474543724822559/unknown.png
.The-Area {
min-height: 972px;
width: 100%;
background-image: linear-gradient(rgba(6,4,11,0.4),rgba(6,4,1,0.3)),url(images/thumbnail_IMG_3625.jpg);
background-position: center;
background-size: cover;
position: relative;
}
.The-Area-Page-Head {
text-align: center;
background: #000000;
color: #fff;
font-size: 40px;
}
.minor-header-spacer .rectangle{
height: 20px;
width: 100%;
background-color: #000000;
}
.slide-container {
width: 800px;
height: 600px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
}
.image-container {
top: 20%;
width: 2400px;
height: 600px;
position: relative;
transition: left 2s;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
}
.slider-image {
float: left;
margin: 0px;
padding: 0px;
}
.button-container {
top: -20px;
position: relative;
}
.slider-button {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: white;
}
#slider-image-1:target ~ .image-container{
left: 0px;
}
#slider-image-2:target ~ .image-container {
left: -800px;
}
#slider-image-3:target ~ .image-container {
left: -1600px;
}
然后我认为这可能与.slide-container {的溢出值有关，所以我玩了overflow-y:和overflow-x:
由于滑块的工作，滑动到视图的图像是通过溢出隐藏的，我希望使overflow-y: visible;和overflow-x: hidden;允许y轴溢出可见，但它只添加了一个滚轮到图像:https://cdn.discordapp.com/attachments/629793987498082326/989477233208983622/unknown.png
然后我删除了.slide-container {中的height值，因为我读到这会导致在页面调整大小后移动图像的问题，但这当然只是将整个滑块弹到顶部。
在这一点上，我不知道还能尝试什么，如果有任何帮助，我将不胜感激。
如果解决方案实际上就在那里，或者如果它能更深入地了解手头的问题，下面是HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, intial-scale=1.0">
<title>Estepona</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300;700&display=swap" rel="stylesheet">
</head>
<body>
<section class="The-Area">
<!-- Head -->
<div class="rectangle"></div>
<div class="minor-header-spacer">
<div class="rectangle"></div>
</div>
<div class="The-Area-Page-Head">
<h1>The Area</h1>
</div>
<div class="minor-header-spacer">
<div class="rectangle"></div>
</div>
<div class="rectangle"></div>
<!-- Body -->
<div class="slide-container">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-container">
<img src="images/the_area/800x600_Wallpaper_Blue_Sky.png" class="slider-image">
<img src="images/the_area/fdr5Z7.jpg" class="slider-image">
<img src="images/the_area/wallpapersden.com_landscape-pixel-art_800x600.jpg" class="slider-image">
</div>
<div class="button-container">
<a href="#slider-image-1" class="slider-button"></a>
<a href="#slider-image-2" class="slider-button"></a>
<a href="#slider-image-3" class="slider-button"></a>
</div>
</div>
</section>
</body>
</html>
我不确定你到底想要实现什么，但对结果的解释是:
-
你"slide-container"固定高度600px，隐藏溢出
-
你"image-container"在幻灯片容器内
因此，如果你设置顶部为50%，顶部现在将在"滑动容器"的顶部下方300px。然后在你的image-container的顶部300px从那里开始显示，底部300px被"隐藏"，因为在"slide-container""上使用了溢出隐藏功能。
如果你还没有使用它，尝试使用jsfiddle.net创建一个最小版本的挑战，你可以在那里玩它。你也可以在这个网站上发布链接到jsfiddle.net的"项目"，这样用户就可以确切地看到你的问题是什么，并可能修复它，并在他们的答案中发布一个链接到jsfiddle.net的修复。