Question

我需要在容器div中自己标签内的不同大小的多幅图像上添加中心文本。

这是设置HTML和CSS的方式

<section>
<div class="row ">
    <div class="col ">
        <div class="container gallery">
            <img class="sports" src="img/block1Sports.jpg">
            <h3 class="text1" >Sports</h3>
            <img id="wellness" src="img/block2Wellness.jpg">
            <h3 class="text1" >wellness</h3>
            <img id="expeditions" src="img/block3Expeditions.jpg">
            <h3 class="text1" >expeditions</h3>
            <img id="games" src="img/block4Games.jpg">
            <h3 class="text1" >games</h3>
            <img id="culture" src="img/block5Culture.jpg">
            <h3 class="text1" >culture</h3>
            <img id="beauty" src="img/block6Beauty.jpg">
            <h3 class="text1" >beauty</h3>
            <img id="travelling" src="img/block7Travelling.jpg">
            <h3 class="text1" >travelling</h3>
        </div>
    </div>
</div>
</section>

所有这些图像都有一条短信，应该全部居中，感谢您的帮助。

Here is a snap example of desired output

Answer 1

使用CSS <img>将图像而不是background-image:url('');放入div容器中。然后在此div上使用display:flex;（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）将文本垂直和水平居中放置。

HTML

<section>
<div class="row ">
    <div class="col ">
        <div class="container gallery">
          <div class="imageWithCenteredText sports">
            <h3 class="text1" >Sports</h3>
          </div>
        </div>
    </div>
    ...
</div>
</section>

CSS

.imageWithCenteredText {
    display:flex;
    justify-content: center;
    align-items: center;
}

.sports {
    background-image: url('img/block1Sports.jpg');
    width: 500px; /* PICTURE WIDTH */
    height: 500px;  /* PICTURE HEIGHT */
}

Answer 2

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <style>
            .gallery-item {
                position: relative;
            }
            .gallery-item img {
                width: 100%;
            }
            .gallery-item h3 {
                position: absolute;
                top: 50%;
                left: 50%;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="row ">
                <div class="col ">
                    <div class="container gallery">
                        <div class="gallery-item">
                            <img class="sports" src="img/block1Sports.jpg">
                            <h3 class="text1" >Sports</h3>
                        </div>
                        <div class="gallery-item">
                            <img id="wellness" src="img/block2Wellness.jpg">
                            <h3 class="text1" >wellness</h3>
                        </div>
                        <div class="gallery-item">
                            <img id="expeditions" src="img/block3Expeditions.jpg">
                            <h3 class="text1" >expeditions</h3>
                        </div>
                        <div class="gallery-item">
                            <img id="games" src="img/block4Games.jpg">
                            <h3 class="text1" >games</h3>
                        </div>
                        <div class="gallery-item">
                            <img id="culture" src="img/block5Culture.jpg">
                            <h3 class="text1" >culture</h3>
                        </div>
                        <div class="gallery-item">
                            <img id="beauty" src="img/block6Beauty.jpg">
                            <h3 class="text1" >beauty</h3>
                        </div>
                        <div class="gallery-item">
                            <img id="travelling" src="img/block7Travelling.jpg">
                            <h3 class="text1" >travelling</h3>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

在多个图像上居中显示文字

2 个答案: