使用CSS将元素放在另一个图像的顶部

发布于 2025-02-06 17:13:11 字数 1372 浏览 2 评论 0原文

我有此代码：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="https://toast-shop.opplayz.repl.co/images/logo">
  <title>Toast Discord Bot</title>
</head>
<style>
  body {
    background-image: linear-gradient(to right, #cfd9f2, #A5B8E7, #cfd9f2);
  }
  .profile{
    margin: 0 auto;
    position: relative;
      display: inline-block;
  }
  .profilelogo{
    width: 25vw;
    height: 25vw;
    display: inline-block;
    float: left;
  }
  .profileinfo{
    font-family: arial;
  }
</style>
<body>
  <div class="profile" id="profile">
    <img src="https://toast-shop.opplayz.repl.co/images/logo" class="profilelogo" id="profilelogo">
    <div class="profileinfo">
      <h1>Toast Shop</h1>
      <h2>A Discord Bot that brings fun to your server</h2>
    </div>
  </div>
</body>

我希望我的图像和文字看起来像这样：

在较大的屏幕上，H1和H2元素在图像停留在中间时进入页面顶部。我希望文本与图像，水平智慧保持一致。我该如何使用CSS做到这一点？

原文

I have this code:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="https://toast-shop.opplayz.repl.co/images/logo">
  <title>Toast Discord Bot</title>
</head>
<style>
  body {
    background-image: linear-gradient(to right, #cfd9f2, #A5B8E7, #cfd9f2);
  }
  .profile{
    margin: 0 auto;
    position: relative;
      display: inline-block;
  }
  .profilelogo{
    width: 25vw;
    height: 25vw;
    display: inline-block;
    float: left;
  }
  .profileinfo{
    font-family: arial;
  }
</style>
<body>
  <div class="profile" id="profile">
    <img src="https://toast-shop.opplayz.repl.co/images/logo" class="profilelogo" id="profilelogo">
    <div class="profileinfo">
      <h1>Toast Shop</h1>
      <h2>A Discord Bot that brings fun to your server</h2>
    </div>
  </div>
</body>

I want my image and text to look like this:

On larger screens, the h1 and h2 elements goes to the top of the page while the image stays in the middle. I want the text to align with the image, horizontal wise. How could I do this with css?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

絕版丫頭 2025-02-13 17:13:11

.profile {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.profile {
    display: flex;
    flex-direction: row;
    align-items: center;
}

回复收藏 0 原文

因为看清所以看轻 2025-02-13 17:13:11

body{
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100vw;
  height: 100vh;
}

img {
  grid-column: 1 / 2;
  grid-row: 1 / -1;
  max-height: 100vh;
  max-width: 50vw;
  object-fit: fill;
}

h1 {
  grid-column: -2 / -1;
  grid-row: 2 / 3;
  margin: 0;
}

h2 {
  grid-column: -2 / -1;
  grid-row: -3 / -2;
  margin: 0;
}

<img src="https://images.unsplash.com/photo-1646672233305-98d8c30c7b08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"/>
<h1>Header 1</h1>
<h2>Header 2</h2>

body{
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100vw;
  height: 100vh;
}

img {
  grid-column: 1 / 2;
  grid-row: 1 / -1;
  max-height: 100vh;
  max-width: 50vw;
  object-fit: fill;
}

h1 {
  grid-column: -2 / -1;
  grid-row: 2 / 3;
  margin: 0;
}

h2 {
  grid-column: -2 / -1;
  grid-row: -3 / -2;
  margin: 0;
}

<img src="https://images.unsplash.com/photo-1646672233305-98d8c30c7b08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"/>
<h1>Header 1</h1>
<h2>Header 2</h2>

回复收藏 0 原文

~没有更多了~