网站开发：如何将图片居中显示并在其左下角添加指定文本

嘿，我来帮你搞定这个需求！你的现有代码已经有了图片居中的雏形，但HTML结构有点小问题，还需要添加左下角的文本元素。下面是调整后的完整方案：

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            /* 防止页面出现滚动条 */
            overflow: hidden;
        }
        .message-container {
            position: relative;
            height: 100%;
            width: 100%;
            /* 也可以用Flexbox实现居中，更简洁，注释掉上面的绝对定位方式可以用这个 */
            /* display: flex;
            justify-content: center;
            align-items: center; */
        }
        .message-bubble {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* 限制图片最大尺寸，避免超出屏幕 */
            max-width: 90%;
            max-height: 90%;
        }
        .read-status {
            position: absolute;
            bottom: 15px; /* 距离容器底部的距离 */
            left: 15px; /* 距离容器左侧的距离 */
            color: #fff; /* 白色文字适配蓝色气泡 */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 14px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 加阴影让文字更清晰 */
        }
    </style>
</head>
<body>
    <div class="message-container">
        <img src="myimage.jpg" class="message-bubble" alt="iMessage气泡">
        <div class="read-status">已读 10:30</div>
    </div>
</body>
</html>

关键细节说明 #

• HTML结构修正：原来的代码把<div>直接放在<head>里不符合规范，现在把内容容器放到了<body>中，结构更合理。
• 图片居中：保留了你原来的绝对定位+margin:auto的方式，同时提供了Flexbox的替代方案（注释部分），两种都能实现完美居中。另外添加了max-width和max-height，避免图片过大超出屏幕。
• 左下角文本：新增.read-status元素，利用容器的相对定位，让文本绝对定位在容器左下角。通过bottom和left调整位置，字体选择了接近iMessage的系统字体，加文字阴影让蓝色气泡上的文字更易读。

你可以根据实际需求调整文本的位置、字体大小和颜色，让它更贴合你的iMessage图片风格~

内容的提问来源于stack exchange，提问作者Artem F