html - 图像上的文本仅包含 css 和 html

Question

我正在尝试在图像中心添加不同的文本。似乎我无法做到这一点，需要一些帮助来完成这项任务。

所以，我在页面上有 4 张图片。现在我想在图片上加上文字。到目前为止，我在页面上有 4 张图片，但文本显示不正确。这是html的一部分

.images {
  text-align: center;
  padding: 15px 15px;
  position: relative;
  vertical-align: middle;
  display: inline;
  width: 430px;
  margin: 10px 0;
}
#img-row {
  display: block;
  margin-top: -15px;
  position: relative;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
  text-align: center;
}
#img-row:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.class {
  position: relative;
}
.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
  padding: 10px;
}
button.button {
  width: 570px;
  margin-left: 182px;
  height: 40px;
  font-size: 30px;
}
.caption-text {
  display: block;
  position: absolute;
  width: 100%;
  color: green;
  left: 0;
  bottom: 50%;
  padding: 1em;
  font-weight: 700;
  z-index: 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="img-row">
  <a href="">
    <button class="button">
      Button
    </button>
  </a>
</div>
<div id="img-row">

  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>

</div>
<div id="img-row">
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
</div>

这是到目前为止的样子:JSFIDDLE .文本只出现两次。

Answer 1

因为您已将图像嵌套在 a 标记中，所以文本对齐 left:0 of img-row。现在它正确地与图像对齐，因为我添加了:

#img-row > a {
  position: relative;
}

考虑以下示例:

#a2{
  position: relative;
  display: block;
}

p{
  position: absolute;
  top: 0px;
  margin: 0;
}

<a id="a1"><p>hello1</p></a>
<a id="a2"><p>hello2</p></a>

absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body... http://learnlayout.com/position.html

您的工作示例:

.images {
  text-align: center;
  padding: 15px 15px;
  position: relative;
  vertical-align: middle;
  display: inline;
  width: 430px;
  margin: 10px 0;
}
#img-row {
  display: block;
  margin-top: -15px;
  position: relative;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
  text-align: center;
}
#img-row > a {
  position: relative;
}
#img-row:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.class {
  position: relative;
}
.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
  padding: 10px;
}
button.button {
  width: 570px;
  margin-left: 182px;
  height: 40px;
  font-size: 30px;
}
.caption-text {
  display: block;
  position: absolute;
  width: 100%;
  color: green;
  left: 0;
  bottom: 50%;
  padding: 1em;
  font-weight: 700;
  z-index: 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
}

<div id="img-row">
  <a href="">
    <button class="button">
      Button
    </button>
  </a>
</div>
<div id="img-row">

  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>

</div>
<div id="img-row">
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
</div>