代码之家 › 专栏 › 技术社区 › user8385857

居中CSS幻灯片

centering slideshow css html

user8385857 · 技术社区 · 8 年前

我有一个CSS幻灯片,目前是左对齐,我试图在页面中心。以前我有一个幻灯片,它覆盖了整个页面,效果很好,但这次周围的图像只占页面的一部分,并且在水平和垂直照片之间混合(所有照片都具有相同的高度)。如果有人能指导我如何将这张幻灯片与页面中心对齐,我将不胜感激。我尝试了很多不同的调整,但没有运气。我正在下面粘贴代码。提前谢谢你。

HTML

#history_slideshow {
  padding-top: 1%;
}

.crossfade2>figure {
  animation: imageAnimation 27s linear infinite 0s;
  backface-visibility: hidden;
  color: transparent;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  padding-top: 0%;
}

.crossfade2>figure:nth-child(1) {
  background-image: url('../photos/history_1.jpg');
  background-repeat: no-repeat;
}

.crossfade2>figure:nth-child(2) {
  animation-delay:6s;
  background-image:url('../photos/history_2.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(3){
  animation-delay:12s;
  background-image:url('../photos/history_3.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('../photos/history_4.jpg');
  background-repeat: no-repeat;
}

@keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}

<div id="history_slideshow" class="crossfade2">
  <figure>
    <img src="../photos/history_1.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_2.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_3.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_4.jpg" alt="" />
  </figure>
</div>

3 回复 | 直到 8 年前

Community CDub 5 年前

您可以使用 display:flex height:100vh 在父容器上 min-height/min-width 当整个内容处于绝对位置时,可以进行明智的选择。

align-items 和 justify-content 将以X、Y轴为中心进行管理。。

#history_slideshow {
  padding-top: 1%;
  /* update */
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  /* could be usefull */
  min-height:400px;
  min-width:600px;
  /* end update */
}

.crossfade2>figure {
  animation: imageAnimation 27s linear infinite 0s;
  backface-visibility: hidden;
  color: transparent;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  padding-top: 0%;
  
}

.crossfade2>figure:nth-child(1) {
  background-image: url('http://dummyimage.com/200x400/acd&text=history_1.jpg');
  background-repeat: no-repeat;
}

.crossfade2>figure:nth-child(2) {
  animation-delay:6s;
  background-image:url('http://dummyimage.com/600x400/afd&text=history_2.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(3){
  animation-delay:12s;
  background-image:url('http://dummyimage.com/200x400/0cd&text=history_3.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('http://dummyimage.com/600x400/456&text=history_4.jpg');
  background-repeat: no-repeat;
}

@keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}

<div id="history_slideshow" class="crossfade2">
  <figure>
    <img src="http://dummyimage.com/200x400/acd&text=history_1.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/600x400/afd&text=history_2.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/200x400/0cd&text=history_3.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/600x400/456&text=history_4.jpg" alt="" />
  </figure>
</div>

水平定心

您可以使用 display + margin 在父容器上。

display:table; 将缩小内容大小,然后 margin:auto

您需要在流程中通过 position: ~~absolute~~ relative

#history_slideshow {
  padding-top: 1%;
  /* update for horizontal centering */
  display:table;
  margin:auto;
  }
  
  .crossfade2>figure:first-of-type {
  position:relative;
}
  /* end update */


.crossfade2>figure {
  animation: imageAnimation 27s linear infinite 0s;
  backface-visibility: hidden;
  color: transparent;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  padding-top: 0%;
}

.crossfade2>figure:nth-child(1) {
  background-image: url('http://dummyimage.com/300x200/acd&text=history_1.jpg');
  background-repeat: no-repeat;
}

.crossfade2>figure:nth-child(2) {
  animation-delay:6s;
  background-image:url('http://dummyimage.com/300x200/afd&text=history_2.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(3){
  animation-delay:12s;
  background-image:url('http://dummyimage.com/300x200/0cd&text=history_3.jpg');
  background-repeat:no-repeat;
}

.crossfade2>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('http://dummyimage.com/300x200/456&text=history_4.jpg');
  background-repeat: no-repeat;
}

@keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}

<div id="history_slideshow" class="crossfade2">
  <figure>
    <img src="http://dummyimage.com/300x200/acd&text=history_1.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/300x200/afd&text=history_2.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/300x200/0cd&text=history_3.jpg" alt="" />
  </figure>
  <figure>
    <img src="http://dummyimage.com/300x200/456&text=history_4.jpg" alt="" />
  </figure>
</div>

saifudeen ni 8 年前

我想你可以把一个 <div> 通过添加
margin: 0 auto
width:auto
display : inline-block

Minal Chauhan Adriano 8 年前

您可以尝试使用 transform

#history_slideshow {
  padding-top: 1%;
}

.crossfade2 > figure {
  animation: imageAnimation 27s linear infinite 0s;
  backface-visibility: hidden;
  color: transparent;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0 auto;
  padding-top: 0%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

.crossfade2 > figure:nth-child(1) {
  background-image: url('../photos/history_1.jpg');
  background-repeat: no-repeat;
}

.crossfade2 > figure:nth-child(2) {
  animation-delay:6s;
  background-image:url('../photos/history_2.jpg');
  background-repeat:no-repeat;
}

.crossfade2 > figure:nth-child(3){
  animation-delay:12s;
  background-image:url('../photos/history_3.jpg');
  background-repeat:no-repeat;
}

.crossfade2 > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('../photos/history_4.jpg');
  background-repeat: no-repeat;
}

@keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}
@-webkit-keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}
@-moz-keyframes imageAnimation {
  0% {
    animation-timing-function:ease-in;
    opacity:0;
  }
  8% {
    animation-timing-function:ease-out;
    opacity:1;
  }
  17% {
    opacity:1
  }
  25% {
    opacity:0
  }
  100% {
    opacity:0
  }
}

<div id="history_slideshow" class="crossfade2">
  <figure>
    <img src="../photos/history_1.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_2.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_3.jpg" alt="" />
  </figure>
  <figure>
    <img src="../photos/history_4.jpg" alt="" />
  </figure>
</div>