在CSS图片中心信件

Question

我有一组7张图片中，我想在图片上添加一个文本（如水印）（会有像一个字母/图像）。到目前为止，我设法安排彼此相邻（创建拼贴的方面），并添加了图像中的文本（和伸展以适合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做它垂直父里面。