对齐图像标题

Question

目前，我有一个图像幻灯片标题没有相对于父容器定位自身的问题。这可能是 DIV 浮动的简单修复，但对于我的生活，我无法弄清楚。问题是文本不在包含图像的容器的约束范围内；因此，在调整网页大小时会发生不同的转换（基本上会移出页面的可见区域）。我希望将容纳文本的容器的高度设置为父容器（容纳图像的容器）的高度，然后再将其格式化为位于页面中心图像的顶部 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>

Answer 2

如果没有一个活生生的例子，很难找出你寻求的最终结果，但每次你的子元素放置在一个不受欢迎的位置时，这意味着他们没有跟随他们的父母。在这种情况下，您必须先与父母合作，然后再修改孩子。

我检查了您的 css 文件，甚至没有一个相对定位的父级。所以我建议你将你的 css 文件编辑到这个版本并阅读我在下面放置的链接。

P.S 如果你没有得到你想要的东西，请制作屏幕截图/jsfiddle 你的情况。

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

CSS：（这只是更改/修改的 CSS 的一部分）

.container {height: 100vh;box-shadow: 0px 8px 5px #888888;background:#CCC;display:block;position: relative;width: 100%;}
.imageBanner {position: relative;display: block;width: 100%;height: 100%;padding: 0 0 0;margin: 0 0 0;}
.imageBanner li {position: absolute;display: block;width: 100%;height: 100%;top:0;left:0;}
.imageBanner li span {font-family:Calibri, Arial, sans-serif;text-align: center;width: 100%;height: 100%;position: absolute;top: 15%;color: #000000;background-size: cover;background-repeat: none;opacity: 0;z-index: 50;font-size: 2em;animation: imageAnimation 18s linear infinite 0s;}
.imageBanner li div {z-index: 1;position: absolute;top:0px;width: 100%;height: 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: rgb(46,105,163);padding: 0 0 0;margin: 0 0 0;line-height: 6em;}

CSS Pos Tutorials
CSS Positions

编辑
CodePen