Question

您好我想在图片底部中心添加文字。它是一个照片库项目，所以所有的图像都是不同的尺寸。 Css需要使用百分比，以便适用于所有尺寸的图像

<div class="images">
   <img src="dummy.jpeg">
   <p>Some text to appear>
</div>

我尝试在stackoverflow上阅读很多问题，但所有问题都适用于一个图像。我有多个不同尺寸的图像。

我想将文字放在图像的底部中央，并在图像上放置宽度为100％的黑色条带。它可能是文本背景。

Answer 1

在标题<p>上使用绝对定位制作容器inline-block
小提琴：{{3}}

＆＃13;

.images {
  position: relative;
  display: inline-block;
}

.images p {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 0;
}

＆＃13;

<div class="images">
   <img src="https://placehold.it/350x150">
   <p>Some text to appear</p>
</div>

＆＃13;

Answer 2

您可以使用 CSS Flexbox 。对于每张图片底部的文字，请使用position: absolute并制作您的父position: relative。

请看下面的代码段：

.images {
  display: flex;
  padding: 5px;
}
.img-holder {
  position: relative;
  margin: 5px;
  align-self: flex-start;
}
.img-holder p {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  margin: 0;
}

<div class="images">
  <div class="img-holder">
    <img src="http://placehold.it/100x100">
    <p>Some text</p>
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/120x120">
    <p>Some text</p>
  </div>
  <div class="img-holder">
    <img src="http://placehold.it/150x150">
    <p>Some text</p>
  </div>
</div>

希望这有帮助！

Answer 3



<!-- comment to fool the edit limiter -->

img{
  width:500px;
  height:200px;
  }
.images{
  width:500px;
  height:200px;
  align-items:center;
  position:relative;
  
  }
p{
  position:absolute;
  bottom:0;
  color:yellow;
  left:50%;
  }
span{
  position: relative;
  left: -50%;
  }
<div class="images">
   <img src="https://i.stack.imgur.com/wwy2w.jpg">
   <p><span>Some text to appear></span></p>
</div>

如何在css中的图像下添加像文本一样的标题

3 个答案: