我妈已经三天没打我了 2024-06-06 09:57 采纳率: 86%
浏览 1
已结题

怎么能让报名参加的图片在下面空白区域垂直居中

怎么能让报名参加的图片在下面空白区域垂直居中

img


<!DOCTYPE html>
<html>

<head>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <meta charset="UTF-8" />
  <meta name="format-detection" content="telephone=no" />
  <title>臻享活动</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/enjoyDetail.css" />
</head>

<body>
  <div class="enjoy">
    <div class="enjoy_logo">
      <img src="./imagess/zxxq_bg.png" alt="">
    </div>
    <div class="enjoy_btn">
      <img src="./imagess/zxxq_btn.png" alt="" onclick="enter()">
    </div>
  </div>
  <script src="./js/main.js"></script>
  <script src="./js/jquery-1.9.1.min.js"></script>
  <script src="./js/enjoyDetail.js"></script>
</body>

</html>

.enjoy{
  background-color: white;
  width: 100%;
}
.enjoy .enjoy_logo img{
  width: 100%;
  height: 100%;
}
.enjoy .enjoy_btn{
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
}
.enjoy .enjoy_btn img{
  width: 5.22rem;
  height: 1.04rem;
}
  • 写回答

2条回答 默认 最新

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

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

    为了使“报名参加”的图片（位于.enjoy_btn内）在其所在区域垂直居中，您可以调整.enjoy_btn的CSS样式。这里提供一个简单的解决方案，将.enjoy_btn的display属性从flex更改为grid，并设置行对齐方式为center。

    修改后的HTML与CSS代码如下：

    <!DOCTYPE html>
<html lang="zh">

<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <meta charset="UTF-8" />
  <meta name="format-detection" content="telephone=no" />
  <title>臻享活动</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .enjoy {
      background-color: white;
      width: 100%;
      height: 100vh; /* 添加高度，例如：100vh，以填充整个视口 */
    }

    .enjoy .enjoy_logo img {
      width: 100%;
      height: 100%;
    }

    .enjoy .enjoy_btn {
      margin-top: 0.6rem;
      display: grid; /* 将display属性更改为grid */
      place-items: center; /* 使用place-items属性实现元素垂直居中 */
      height: 30%; /* 设置一个合适的高度，例如：30%，具体数值根据实际需求调整 */
    }

    .enjoy .enjoy_btn img {
      width: 5.22rem;
      height: 1.04rem;
    }
  </style>
</head>

<body>
  <div class="enjoy">
    <div class="enjoy_logo">
      <img src="./imagess/zxxq_bg.png" alt="">
    </div>
    <div class="enjoy_btn">
      <img src="./imagess/zxxq_btn.png" alt="" onclick="enter()">
    </div>
  </div>
  <script src="./js/main.js"></script>
  <script src="./js/jquery-1.9.1.min.js"></script>
  <script src="./js/enjoyDetail.js"></script>
</body>

</html>

    在这个例子中，我添加了CSS样式表到HTML文件内部，这样可以简化代码。同时，为了让页面布局更加清晰，我将.enjoy的高度设为100vh（视口高度），并设置了.enjoy_btn的高度为总高度的30%。这样，“报名参加”的图片就会在其所在的.enjoy_btn区域内垂直居中显示。记得替换.enjoy_logo img和.enjoy_btn img的src路径为你实际的图片路径。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 6月14日
  • 已采纳回答 6月6日
  • 创建了问题 6月6日

悬赏问题

  • ¥15 三分类机器学习模型可视化分析
  • ¥15 本地测试网站127.0.0.1 已拒绝连接，如何解决？(标签-ubuntu)
  • ¥50 Qt在release捕获异常并跟踪堆栈(有Demo，跑一下环境再回答)
  • ¥30 python，LLM 文本提炼
  • ¥15 关于将inet引入的相关问题
  • ¥15 关于一个倒计时的操作和显示设计
  • ¥15 提问STK的问题，哪位航天领域的同学会啊
  • ¥15 苹果系统的mac m1芯片的笔记本使用ce修改器使用不了
  • ¥15 单相逆变的电压电流双闭环中进行低通滤波PID算法改进
  • ¥15 关于#java#的问题，请各位专家解答！