html - 对齐图像标题

Question

目前，我遇到的问题是图像幻灯片标题未相对于父容器定位。这可能是 DIV float 的简单修复，但对于我的生活，我无法弄清楚。问题是文本不在容纳图像的容器的约束范围内；因此在调整网页大小时会发生不同的转换(基本上移出页面的可见区域)。我希望在将其格式化为位于页面中央图像的顶部 1/3 之前，将包含文本的容器的高度设置为父容器(包含图像的容器)的高度。文本基于 UL 并在列表中的元素之间转换为图像上的叠加层。

This is the code on Codepen.正如 CSS 转换时所见，文本(例如使用的白色背景)都在 .container DIV 的边界之外(带有阴影的 UL，我希望将文本约束到该位置。

如有任何帮助，我们将不胜感激。

这是HTML

<div class="container" >
<ul class="imageBanner">
<li>
<span>Image 01</span>
<div>
<h2>Ahoy.</h2>
</div>
</li>
<li><span>Image 02</span>
<div>
<h2>Welcome.</h2>
</div></li>
<li><span>Image 03</span>
<div>
<h2>Bonjour.</h2>
</div></li>
</ul>
</div>

这是CSS

    .container {
  /* Full height*/
    height: 100%;
    box-shadow: 0px 8px 5px #888888;
    background:#ccc;
}


/* Image Slideshow Banner */


.imageBanner li span {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   color: transparent;
   background-size: cover;
   background-position: 30%;
   background-repeat: none;
   opacity: 0;
   z-index: 0;
   animation: imageAnimation 18s linear infinite 0s;
 }
 .imageBanner li div {
     z-index: 1;
     position: absolute;
     top:0px;
     width: 100%;
     text-align: center;
     opacity: 0;
     animation: titleAnimation 18s linear infinite 0s;
 }
 .imageBanner li div h2 {

     font-family:Calibri, Arial, sans-serif;
     background: #fff;
     font-size: 7em;
     color: rgb(46,105,163);

     line-height: 6em;
 }
.imageBanner li:nth-child(1) span {
 background-image: url('./images/iron_giant.jpg');
}
.imageBanner li:nth-child(2) span {
   background-image: url("./images/lonely_island.jpg");
   animation-delay: 6s;
}
.imageBanner li:nth-child(3) span {
   background-image: url("./images/mountain_range.jpg");
   animation-delay: 12s;
}

.imageBanner li:nth-child(2) div {
   animation-delay: 6s;
}
.imageBanner li:nth-child(3) div {
   animation-delay: 12s;
}
   @keyframes imageAnimation {
     0% { opacity: 0; animation-timing-function: ease-in; }
     8% { opacity: 1; animation-timing-function: ease-out; }
     17% { opacity: 1 }
     35% { opacity: 0 }
     100% { opacity: 0 }
 }
 @keyframes titleAnimation {
     0% { opacity: 0 }
     8% { opacity: 1 }
     17% { opacity: 1 }
     35% { opacity: 0 }
     100% { opacity: 0 }
 }

Answer 1

HTML5 标记将帮助您理解居中字幕对齐。

这是一个基本示例:

.container {
  /* Full height*/
  height: 100%;
  box-shadow: 0px 8px 5px #888888;
  background: #ccc;
}

ul {
  margin: 0;
  padding: 0;
  display: block;
}

li {
  list-style: none;
  height: 100% display: block;
}


/* Image Slideshow Banner */

.imageBanner li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: none;
  z-index: 0;
  animation: imageAnimation 18s linear infinite 0s;
}

.imageBanner li div {
  z-index: 1;
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  opacity: 0;
  animation: titleAnimation 18s linear infinite 0s;
}

.imageBanner li div h3 {
  font-family: Calibri, Arial, sans-serif;
  background: #fff;
  font-size: 7em;
  color: #2e69a3;
  line-height: 6em;
}

.imageBanner li:nth-child(1) span {
  background-image: url("https://unsplash.it/1200/800");
}

.imageBanner li:nth-child(2) span {
  background-image: url("https://unsplash.it/1200/800");
  animation-delay: 6s;
}

.imageBanner li:nth-child(3) span {
  background-image: url("https://unsplash.it/1200/800");
  animation-delay: 12s;
}

.imageBanner li:nth-child(2) div {
  animation-delay: 6s;
}

.imageBanner li:nth-child(3) div {
  animation-delay: 12s;
}

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

@keyframes titleAnimation {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<div class="container">
  <ul class="imageBanner">
    <li>
      <span></span>
      <div>
        <h3>Ahoy.</h3>
      </div>
    </li>
    <li><span></span>
      <div>
        <h3>Welcome.</h3>
      </div>
    </li>
    <li><span></span>
      <div>
        <h3>Bonjour.</h3>
      </div>
    </li>
  </ul>
</div>