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

在没有实例的情况下找出你所寻求的最终结果有点困难，但每次你的孩子元素放置在一个不可取的位置时，就意味着他们不会跟随父母。在这种情况下，你必须先与父母一起工作然后修改孩子。

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

如果你没有得到你想要的东西，请制作并筛选你的情况。

<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

Answer 2

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>

对齐图像标题

2 个答案: