Question

我有一组7张图像，我想在图像上方添加一个文本（如水印）（每个字母/图像会有一个）。到目前为止，我设法将图像彼此相邻排列（以创建拼贴的外观），并在图像上添加文本（并将其拉伸以适合div宽度）。我没有设法使文本也适合div的高度（在这种情况下为“ row1”）；我尝试设置：

height: -webkit-fill-available;

但是它什么也没做...

此外，我希望文本在移动版本中自动调整大小，并在每张图片中保持字母的相同位置（有关如何操作的提示，plz？:(）

到目前为止，这是我的代码：

<div class="row1">
   <div class="collage_column">
        <img src="images/collage1.jpg" class="img img-responsive">
    </div>
    <div class="collage_column">
        <img src="images/collage2.jpg" class="img img-responsive">
    </div>
    <div class="collage_column">
        <img src="images/collage3.jpg" class="img img-responsive">
    </div>
    <div class="collage_column">
        <img src="images/collage4.jpg" class="img img-responsive">
    </div>
    <div class="collage_column">
        <img src="images/collage5.jpg" class="img img-responsive">
    </div>
    <div class="collage_column">
        <img src="images/collage6.jpg" class="img img-responsive">
    </div>
    <div class="collage_column">
        <img src="images/collage7.jpg" class="img img-responsive">
    </div>
    <div class="text">
        A B C D E F G
        <span></span>
    </div>
</div>

这是CSS：

.row1 {
    padding-bottom: 4em !important;
    margin-top: -4em !important;
    position: relative;
    display: flex;
    max-height: 200px;
}

    .row1 .img {
        display: block;
        max-height: 100%;
        max-width: 100%;
        padding-right: 5px;
        padding-left: 5px;
    }

    .row1 .text {
        z-index: 100;
        position: absolute;
        color: white;
        font-size: 40px;
        font-weight: bold;
        text-align: justify;
        height: 100%;
        width: 100%;
        opacity: 0.7;
    }

.collage_column {
    flex: 14.28%;
}

.row1 .text span {
    background-color: red;
    width: 100%;
    height: 0em;
    display: inline-block;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;

Answer 1

希望这会有所帮助。谢谢..我每个字母都放在span标签内，而那个span标签放在.collage_column中。用span来制作position:absolute top:50; left:50%，并使用翻译将其置于中心。谢谢

.row1 {
    padding-bottom: 4em !important;
    position: relative;
    display: flex;
    max-height: 200px;
    margin-top:10px
}

    .row1 .img {
        display: block;
        max-height: 100%;
        max-width: 100%;
        padding-right: 5px;
        padding-left: 5px;
        height:100px;
    }

    .row1 span {
        z-index: 100;
    position: absolute;
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-align: justify;
    /* height: 100%; */
    /* width: 100%; */
    opacity: 0.7;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }

.collage_column {
    flex: 14.28%;
    position:relative;
}

.row1 .text span {
    background-color: red;
    width: 100%;
    height: 0em;
    display: inline-block;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;}
    
 .collage_column span{color:white}

<div class="row1">
   <div class="collage_column">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img img-responsive">
        
        <span>D</span>  
    </div>
    <div class="collage_column">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img img-responsive">
        <span>I</span>  
    </div>
    <div class="collage_column">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img img-responsive">
        <span>G</span>  
    </div>
    <div class="collage_column">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img img-responsive">
        <span>I</span>  
    </div>
    <div class="collage_column">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img img-responsive">
        <span>C</span>  
    </div>
    <div class="collage_column">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img img-responsive">
        <span>O</span>  
    </div>
    <div class="collage_column">
        <img src="https://www.w3schools.com/w3css/img_lights.jpg" class="img img-responsive">
        <span>N</span>  
    </div>
</div>

Answer 2

尝试一下

    .gallery-text{
	    position: absolute;
	    top: 0; right: 0;
	    bottom: 0; left: 0;
	    width: 300px;
	    height: 200px; 
	    text-align: center;
       vertical-align:middle;
       line-height:200px;
	}

<div class="gallery-image">
  <img src="https://37.media.tumblr.com/bddaeb8fe12eda6bb40cf6a0a18d9efa/tumblr_n8zm8ndGiY1st5lhmo1_1280.jpg" width="300" height="200" />
  
<div class="gallery-text">

<h3>BOOM!</h3>
  
</div>

Answer 3

如果您将字母分开并将每个字母分配给其图像，则要容易得多。然后，您可以在父级上使用dipslay: flex（在我的示例中为figure）来使字母居中。

Here's a Pen

justify-content属性将其水平居中，而align-items属性将其垂直置于父级内部。

CSS中图像的中心字母

3 个答案: