html怎么把文字放在图片中间

要在HTML中将文字放在图片中间，可以使用CSS的绝对定位和居中技巧。下面是一个示例：

 .container {
        position: relative;
        display: inpne-block; /* 使容器只占据文字和图片所需的空间 */
    }

    .container img {
        display: block;
        max-width: 100%;
    }

    .container .text-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 将文本框水平垂直居中 */
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 10px;
        font-size: 16px;
    } 
 
 Your Text Here 

在上面的示例中，首先创建一个相对定位的容器（.container），然后在容器内部放置图片和用于覆盖在图片上方的文字框（.text-overlay）。通过设置容器为position: relative;，并将文字框设置为position: absolute;，可以将文字框相对于容器进行定位。利用top: 50%;、left: 50%;和transform: translate(-50%, -50%);的组合，可以使文字框垂直和水平居中。

您可以根据需要调整文字框的样式，例如背景颜色、字体大小等。同时，还可以根据实际情况设置图片的最大宽度（.container img）以及容器的显示方式（.container）。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com