Центрирование букв на изображениях в CSS

Question

У меня есть набор из 7 изображений, и я хочу добавить текст (например, водяной знак) поверх изображений (там будет как одна буква / изображение).До сих пор мне удалось расположить изображения одно рядом друг с другом (чтобы создать аспект коллажа) и добавить текст поверх изображений (и растянуть его до ширины div).Мне не удалось привести текст в соответствие с высотой div (в данном случае «row1»);Я пытался установить:

height: -webkit-fill-available;

, но ничего не происходит ...

Кроме того, я хочу, чтобы текст автоматически изменял размер в мобильной версии и сохранял ту же позициюбукв на каждой картинке (любой намек на то, как это сделать, плз? :()

Это мой код до сих пор:

<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

Намного проще, если вы разделяете буквы и назначаете каждую букву своему изображению.Затем вы можете использовать dipslay: flex на родителе (figure в моем примере), чтобы центрировать букву.

Вот ручка

Центры свойств justify-contentэто горизонтально, в то время как align-items делает это вертикально внутри родителя.

Answer 3

Попробуйте это

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