HTML新手求助：Flask中实现图片下方/右侧文本对齐

作为HTML新手，别担心，实现图片下方或右侧对齐文本其实很简单，我给你两种常用的方案，直接替换到你的代码里就能用：

方案1：文本在图片下方（居中卡片式布局） #

这种适合展示多个带说明的图片，核心是用容器把图片和文本包裹起来，通过CSS控制整体居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片下方文本</title>
    <style>
        .img-text-card {
            display: inline-block; /* 容器随内容宽度自适应 */
            text-align: center; /* 内部内容居中 */
            margin: 15px; /* 卡片之间留间距 */
        }
        .img-text-card img {
            width: 220px; /* 统一图片宽度，可按需调整 */
            height: auto; /* 保持图片比例不变 */
            border-radius: 8px; /* 可选：给图片加圆角美化 */
        }
        .img-text-card p {
            margin-top: 10px; /* 文本与图片的间距 */
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="img-text-card">
        <img src="你的图片路径1.jpg" alt="图片1">
        <p>这是图片1的说明文本</p>
    </div>
    <div class="img-text-card">
        <img src="你的图片路径2.jpg" alt="图片2">
        <p>这是图片2的说明文本</p>
    </div>
    <div class="img-text-card">
        <img src="你的图片路径3.jpg" alt="图片3">
        <p>这是图片3的说明文本</p>
    </div>
</body>
</html>

提示：多个卡片会自动并排显示，超出屏幕宽度时会自动换行，非常适合做产品展示、相册这类布局。

方案2：文本在图片右侧（左右联动布局） #

这种适合单张图片配右侧详细说明的场景，用Flex布局就能轻松实现垂直对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片右侧文本</title>
    <style>
        .img-right-layout {
            display: flex; /* 启用Flex布局 */
            align-items: center; /* 垂直方向居中对齐 */
            gap: 25px; /* 图片与文本的间距 */
            max-width: 900px; /* 限制容器宽度，避免拉伸过宽 */
            margin: 30px auto; /* 让整个容器在页面居中 */
            padding: 15px;
            border: 1px solid #eee; /* 可选：加边框美化 */
            border-radius: 10px;
        }
        .img-right-layout img {
            width: 350px;
            height: auto;
        }
        .img-right-layout .text-area {
            flex: 1; /* 文本部分自动占满剩余空间 */
        }
        .img-right-layout h3 {
            margin-top: 0;
            color: #222;
        }
    </style>
</head>
<body>
    <div class="img-right-layout">
        <img src="你的图片路径.jpg" alt="示例图片">
        <div class="text-area">
            <h3>这是图片的标题</h3>
            <p>这里是图片的详细说明文本，可以写多行内容。Flex布局会自动让文本和图片保持垂直居中，就算文本长短变化也不会错位~</p>
            <p>如果想让文本顶部和图片顶部对齐，只需要把`align-items: center`改成`align-items: flex-start`就可以啦。</p>
        </div>
    </div>
</body>
</html>

这两种方案都是纯CSS实现，不需要依赖任何框架，新手也能快速上手，你可以根据自己的需求直接套用~

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