CSS 中图像的中心字母

Question

我有一组 7 张图片，我想在图片上添加一个文本（如水印）（会有一个 letter/image）。到目前为止，我设法将图像彼此相邻排列（以创建拼贴画的外观）并在图像上添加文本（并将其拉伸以适合 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

试试这个

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

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

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

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

Here's a Pen

justify-content 属性水平居中，而 align-items 垂直居中。

CSS 中图像的中心字母

Center letters on images in CSS

html

css

watermark