图片中的文字

Question

我真的很想在每张照片中间找到一个文字。我的画廊有50张照片，每张照片都有不同的尺寸。这是我的代码，但它不起作用/ /有人可以帮忙吗？所有“样本”文本都应该在中间。

HTML：

<div class="row"> 
<div class="column">

<img src="/artbook/1.jpg">
<p> sample </p>
<img src="/artbook/2.jpg">
<p> sample</p>
<img src="/artbook/3.jpg">
<p> sample</p>
<img src="/artbook/4.jpg">
<P> sample </p>
<img src="/artbook/5.jpg">
<P> sample </p>
</div>
</div>

CSS：

.column img {
 margin-top: 10px;
 vertical-align: middle;
 display: block;
 align-content: center;
 max-width: 250px;

.column p{
 position: absolute;
 text-align: center;
 z-index: 1;

Answer 1

这样的东西应该使用外部div容器。它还使用translate函数根据父容器正确地垂直和水平居中文本。要记住的一件事是，当您想根据父容器定位某些内容时，父容器也必须是相对的或绝对的。

此外，默认情况下，段落元素周围有额外的填充。您可能更喜欢使用div。

.column div.outer {
     position: relative;
     display: inline-block;
}

.column img {
     margin-top: 10px;
     vertical-align: middle;
     align-content: center;
     max-width: 250px;
 }
 
.outer div{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
}

<div class="row"> 
  <div class="column">
    <div class="outer">
      <img src="1.jpg">
      <div> sample1 </div>
    </div>
    <div class="outer">
      <img src="2.jpg">
      <div> sample2</div>
    </div>
    <div class="outer">
      <img src="3.jpg">
      <div> sample3</div>
    </div>
    <div class="outer">
      <img src="4.jpg">
      <div> sample4 </div>
    </div>
    <div class="outer">
      <img src="5.jpg">
      <div> sample5 </div>
    </div>
  </div>
</div>

Answer 2

看看这个。

首先为您的图像和文本创建一个holder。给它position:relative。现在，绝对定位包含相对于p文本的holder元素。但是用p将你的top:0; bottom:0; left:0; right:0;扩展到所有方面。现在p占据了整个holder。只需将display:flex;应用于它并使用justify-content:center; align-items:center将内容居中。

.holder{
  position:relative;
  display:inline-block;
}
.holder:hover img{
  filter: brightness(100%);
}
.column img {
 filter: brightness(45%);
 margin-top: 10px;
 vertical-align: middle;
 display: block;
 align-content: center;
 max-width: 250px;
}
.column p{
 position: absolute;
 display:flex;
 justify-content:center;
 align-items:center;
 z-index: 1;
 top:0;
 bottom:0;
 left:0;
 right:0;
 }

<div class="row"> 
<div class="column">
<div class='holder'>
<img src="http://via.placeholder.com/350x100">
<p> sample </p>
</div>
<div class='holder'>
<img src="http://via.placeholder.com/350x150">
<p> sample </p>
</div>
</div>
</div>