Horizontally Center h1 Next to an Image

Question

I am working on a website and I have the logo in the top left of the screen. The title for the page should be centered on the page but because of the image, it is being pushed to the right. The code I have in CSS and in HTML is:

#logo {
  padding: 20px;
  float: left;
}

h1 {
  text-align: center;
  padding: 25px;
  font-size: 75px;
}

<body>
  <img id="logo" src="logo.png">
  <h1>Home Page</h1>
</body>

Any ideas how to fix this issue?

I added the html that I have into the main body of the question — Michael Debo, Jun 19 '22 at 20:32
They are both in the section, I forgot to add that into the code when I added the HTML — Michael Debo, Jun 19 '22 at 20:34

score 1 · Answer 1 · edited Jun 19 '22 at 20:50

For example:

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  height: 50px;
  background: grey;
}

.header__img {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Test</title>
  </head>
  <body>
    <header class="header">
      <img
        class="header__img"
        src="https://images.unsplash.com/photo-1567446537708-ac4aa75c9c28?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
        alt=""
      />
      <h1 class="header__title">Home Page</h1>
    </header>
    <script src="./main.js"></script>
  </body>
</html>

Please add an explanation of how your solved it, and why that solves it. — connexo, Jun 19 '22 at 21:15

Horizontally Center h1 Next to an Image

1 Answers1