comomomo 2024-06-14 09:02 采纳率: 50%
浏览 1

帮帮我吧 尊嘟不会写😭

img


绑绑我吧 尊嘟不会写😭 就差这一题了 怎么让文字位于图片的下面呀 实在搞不懂 可以绑绑我吗😢

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-14 09:02
    关注

    引自免费微信小程序：皆我百晓生

    为了解决你的问题，我们可以创建一个简单的HTML页面，并使用CSS来布局文本和图片。下面是一个示例代码，展示了如何将文本放置在图片下方。

    首先，我们创建一个HTML文件（例如3-3.html），然后在其中添加以下内容：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        
        .image-container {
            width: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .text {
            text-align: center;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
        
        table {
            border-collapse: collapse;
            width: 80%;
            margin-top: 50px;
        }
        
        td {
            border: 2px solid #000;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="path_to_your_image.jpg" alt="示例图片">
    </div>
    <div class="text">
        海底花园雪域菠萝花朵波浪别墅草坪沙漠海港原野大道
    </div>
    
    <table>
        <tr>
            <td>海底</td>
            <td>花园</td>
            <td>雪域</td>
        </tr>
        <tr>
            <td>菠萝</td>
            <td>花朵</td>
            <td>波浪</td>
        </tr>
        <tr>
            <td>别墅</td>
            <td>草坪</td>
            <td>沙漠</td>
        </tr>
        <tr>
            <td>海港</td>
            <td>原野</td>
            <td>大道</td>
        </tr>
    </table>
</body>
</html>

    在这个代码中，我们使用了CSS Flexbox布局来确保图片位于文本上方，并且图片和文本都居中显示。对于表格，我们使用了border-collapse: collapse;属性来合并单元格的边框，使它们看起来更整洁。此外，我们还为表格和单元格添加了边框、内边距和居中对齐的文本。

    请将上述代码保存到3-3.html文件中，并将path_to_your_image.jpg替换为你实际图片文件的路径。这将创建一个页面，其中包含一个图片和一段文本，以及一个带有边框的表格。希望这能帮到你！如果有任何疑问或需要进一步的帮助，请随时告诉我。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 6月14日

悬赏问题

  • ¥15 Windows X86 远线程注入问题解惑
  • ¥15 Vs2022安装时黑框闪退无反应
  • ¥15 嵌入式设备网口down后再up时不能link？
  • ¥15 关于区块链和边缘计算
  • ¥15 做一个简单项目，用Python分析共享单车的数据
  • ¥20 在使用CESM2.2.0模型进行case.submit过程中出现如下错误(关键词-Map)
  • ¥15 有办法改变通过wifi进入的网站的设置吗
  • ¥15 label_studio
  • ¥15 请教如何phython发邮件
  • ¥15 linux系统安装问题