时间戳

首页 > 解决方案 > 如何将此幻灯片移动到页面的中心（水平）？

html - 如何将此幻灯片移动到页面的中心（水平）？

问题描述

我已经对以前的问题尝试了多个答案，但我似乎无法找到如何将我的幻灯片移动到页面中心（水平）。如果我尝试使用 text-align: center; 它不起作用。我在 HTML 和 CSS 方面不是很好，因此感谢您的帮助。幻灯片的大小很好，但位置需要居中，而不是在页面的左上角。填充似乎也不起作用。

Slider{
  display: block;
  width:90%;
  height:92%;
  background-color: #0AF8B3;
  overflow: hidden;
  position: absolute;
  border: 2px solid red;
}

Slider > * {
    position: absolute;
    display: block;
    width:100%;
    height:100%; 
    background: #FF8000;
    animation: slide 12s infinite;
    overflow: hidden;
}

Slide:nth-child(1) {
    left: 0%;
    animation-delay: -1s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

Slide:nth-child(2) {
    animation-delay: 2s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

Slide:nth-child(3) {
    animation-delay: 5s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

Slide:nth-child(4) {
    left: 0%;
    animation-delay: 8s;
    background-image: url(Here's a link);
    background-size: cover;
    background-position: center;
}

slide p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 560px;
    color: black;
}

@keyframes slide {
    0% { left: 100%; width: 100%;}
    5% { left: 0%;}
    25% {left: 0%;}
    30% {left: -100%; width: 100%;}
    30.0001% {left: -100%; width: 0%;}
    100% { left: 100%; width: 0%;}
}
 <section id="PageC">
             <h1>Photos</h1>  
                <slider>
                    <slide><p>A 2015</p></slide>
                    <slide><p>V 2017</p></slide>
                    <slide><p>A 2018</p></slide>
                    <slide><p>F 2018</p></slide>
                </slider>
             <article>Slideshow lorem ipsum.</article>        
        </section>

谢谢！

标签： htmlcssslideshowcenter

解决方案

请看下文。更改记录在 CSS 代码中。希望能帮助到你。

Slider {
  display: block;
  width: 90%;
  height: 200px; /* Adjusted */
  background-color: #0AF8B3;
  overflow: hidden;
  /* position: absolute; REMOVED */
  position: relative; /* Added */
  border: 2px solid red;
  margin: 0 auto; /* Added */
}

Slider>* {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #FF8000;
  animation: slide 12s infinite;
  overflow: hidden;
}

Slide:nth-child(1) {
  left: 0%;
  animation-delay: -1s;
  background-image: url(https://via.placeholder.com/200x100/ff0000);
  background-size: cover;
  background-position: center;
}

Slide:nth-child(2) {
  animation-delay: 2s;
  background-image: url(https://via.placeholder.com/200x100/00ff00);
  background-size: cover;
  background-position: center;
}

Slide:nth-child(3) {
  animation-delay: 5s;
  background-image: url(https://via.placeholder.com/200x100/0000ff);
  background-size: cover;
  background-position: center;
}

Slide:nth-child(4) {
  left: 0%;
  animation-delay: 8s;
  background-image: url(https://via.placeholder.com/200x100/00ffff);
  background-size: cover;
  background-position: center;
}

slide p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-top: 560px;
  color: black;
}

@keyframes slide {
  0% {
    left: 100%;
    width: 100%;
  }
  5% {
    left: 0%;
  }
  25% {
    left: 0%;
  }
  30% {
    left: -100%;
    width: 100%;
  }
  30.0001% {
    left: -100%;
    width: 0%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}
<section id="PageC">
  <h1>Photos</h1>
  <slider>
    <slide>
      <p>A 2015</p>
    </slide>
    <slide>
      <p>V 2017</p>
    </slide>
    <slide>
      <p>A 2018</p>
    </slide>
    <slide>
      <p>F 2018</p>
    </slide>
  </slider>
  <article>Slideshow lorem ipsum.</article>
</section>

推荐阅读