Positioning a div to the center of an image using css-CodePudding

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  id="profile">
    <img src="https://toast-shop.opplayz.repl.co/images/logo"  id="profilelogo">
    <div >
      <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 bigger screens, the text 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?

CodePudding user response：

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

CodePudding user response：

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>