html - 在多个图像上居中文本

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

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

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 */
}