html - 防止子div在调整页面大小时溢出其父容器

Question

我一直在尝试利用此处与此问题相关的现有答案，但没有一个能解决我的问题。

我有一个 bootstrap 3 图像轮播，在那个轮播容器中，有固定的文本。问题是当浏览器页面缩小时，文本会溢出到其父页面之外。我在容器类('container')上添加了位置:'relative'，但文本仍然溢出。关于如何防止这种情况有什么建议吗？

CSS:

.container {
  position: relative;
}
.child-header {
  z-index: 2;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

图片轮播:

<div class="container">
    <div id="hero-slider" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#hero-slider" data-slide-to="0" class="active"></li>
          <li data-target="#hero-slider" data-slide-to="1"></li>
          <li data-target="#hero-slider" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img class="hero-image" src="/assets/1.jpg">
          </div>
          <div class="item">
            <img class="hero-image" src="/assets/2.jpg">
          </div>
          <div class="item">
            <img class="hero-image" src="/assets/3.jpg">
          </div>
        </div>
    </div>
    <div class="child-header">
        <h1><i>Heading 1</i></h1>
        <h3>Some description here</h3>
    </div>
</div>

Answer 1

首先，您的代码不正确，top 和 transform 缺少分号，} 之后的分号也不正确。将 position absolute 添加到 header 以相对于相对容器进行绝对定位。

.container {
  position: relative;
}
.child-header {
  z-index: 2;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}