Html 如何在图像上放置文本/标题？_Html_Css_Class

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

html css class

Html 如何在图像上放置文本/标题？,html,css,class,Html,Css,Class,我如何将标题放在每个图像的中心？例如，在图像中心的第一个“音乐”上方 <div class="row"> <div class="item"> <img src="images/music_cover.png"/> </div> <div class="item"> <

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

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

以下是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>


左下角
左上角
右上角
右下角
居中的

我希望这对你有用。

我可以想象这样的事情。创建一个包含图像和绝对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>


.项目{
位置：相对位置；
文本对齐：居中；
颜色：白色；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
居中的

假设您在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>

制作图像背景，使用不同的位置、附件、大小等属性来获得所需内容

看

或者更可靠、更可扩展的方法：通过标签将图像放入SVG（请参阅），并向SVG添加文本

标题是多行还是“长”（即比

元素的典型宽度宽）？

.item {
    position:relative;
}

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