Question

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

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

检查出来。

首先为您的图片和文字创建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; }。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

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

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

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

图片中的文字

2 个答案: