如何使用 CSS 将文本置于图像上方？

使用 CSS 将文本在图像上居中

在本文中，我们将探索使用 CSS 将文本在图像上居中的技术。

简单解决方案

实现基本文本以图像为中心，采用以下步骤：

• 对文本元素使用position:absolute。
• 将 left 属性设置为 0，将 width 属性设置为 100%。
• 水平居中文本，边距：0 auto.

示例：

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

.image {
   position: relative;
}

.text {
   position: absolute;
   left: 0;
   width: 100%;
   margin: 0 auto;
}

使用 z-Index

来确保文本出现在图像上，将 z-index 应用于值高于图像的文本元素z-索引。

示例：

<div>

#container {
    height: 400px;
    width: 400px;
    position: relative;
}

#image {
    position: absolute;
    left: 0;
    top: 0;
}

#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
}

以上是如何使用 CSS 将文本置于图像上方？的详细内容。更多信息请关注PHP中文网其他相关文章！