Question

如何将标题放在每个图像的中心？例如，在图像中心的第一个“音乐”

             <div class="row">
            <div class="item">
                <img src="images/music_cover.png"/>
             </div>
             <div class="item">
                <img src="images/event_cover.png"/>
             </div>
             <div class="item">
                <img src="images/lights_cover.png"/>
             </div>
         </div>

Answer 1

以下是CSS代码：

    /* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

以下是HTML代码。

<div class="container">
 <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
 <div class="bottom-left">Bottom Left</div>
 <div class="top-left">Top Left</div>
 <div class="top-right">Top Right</div>
 <div class="bottom-right">Bottom Right</div>
 <div class="centered">Centered</div>
</div>

我希望这适合你。

Answer 2

我想象的这样的东西。创建一个包含图像和绝对div的容器，以包含文本

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.item {
    position: relative;
    text-align: center;
    color: white;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

</head>

<div class="item">
  <img src="images/music_cover.png" style="width:100%;"/>
  <div class="centered">Centered</div>
</div>

</html>

Answer 3

假设您已将这些标题引入HTML：

<div class="row">
    <div class="item">
        <h2>Heading 1</h2>
        <img src="images/music_cover.png"/>
    </div>
    <div class="item">
        <h2>Heading 2</h2>
        <img src="images/event_cover.png"/>
    </div>
    <div class="item">
        <h2>Heading 3</h2>
        <img src="images/lights_cover.png"/>
    </div>
</div>

通过引入以下css，您可以在图像上实现快速居中的标题结果：

.item {
    position:relative;
}

.item h2 {
    position:absolute;
    text-align:center;
    top:50%;
    left:0;
    right:0;
    line-height:1;
    margin-top:-0.5em;
}

Answer 4

制作图像背景，使用不同的位置，附件，尺寸等属性来获得所需

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/background

或者更可靠和可扩展的方法：通过标签将图像放入SVG（请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag）并将文本添加到SVG

如何在图像上放置文字/标题？

4 个答案: