Center letters on images in CSS

Question

I have a set of 7 images and I want to add a text (like a watermark) on top of the images (there will be like one letter/image). So far I managed to arrange the images one next to each other (to create the aspect of a collage) and add the text over the images (and stretch it to fit the div width). I didn't managed to make the text fit also the height of the div ("row1" in this case); i've tried to set:

height: -webkit-fill-available;

but it doesn't do anything...

Also, I want the text to resize automatically in mobile version and to keep the same position of the letters in every picture (any hint on how to do that, plz? :( )

This is my code so far:

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

And this is the 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

Hope this helps. thanks.. i have each letter inside a span tag and that span tag inside .collage_column. made that span position:absolute with top:50; left:50% and used translate to bring it in the center. thanks

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