使用 css 将元素定位在另一个图像的顶部，同时居中答案

【问题标题】：Using css to position an element on top of another image while centered使用 css 将元素定位在另一个图像的顶部，同时居中
【发布时间】：2022-08-11 07:42:22
【问题描述】：

我有这个代码：

<!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做到这一点？

标签： html css alignment web-frontend

【解决方案1】：

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

【讨论】：

【解决方案2】：

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>

【讨论】：