Html problem the heading isnt there in the same line as the logo-CodePudding

i wanted to make a website about man utd merch to start i inserted the logo and set everything but the heading and line i insert are far from the heading . the probleme i am faceing

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Man Utd Merch</title>
    <style>
        h1 {
  text-align: center;
}

    </style>
</head>
<body>
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/7/7a/Manchester_United_FC_crest.svg/800px-Manchester_United_FC_crest.svg.png" width="50" height="50">
    <img align=”left”>
    <h1> Man Utd Merch</h1>
    <hr>
    
    
    
</body>
</html>

i tried to places the logo and heading the same line

CodePudding user response：

I would do something like this. display: flex; allows you to put two (or more) elements in one line. Also I've changed <hr> to border-bottom and <h1> to <span> because it's seems more reasonable and clearer in my opinion.

<html lang="en">
<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">
    <title>Man Utd Merch</title>
<style>
img {
  align: left;  
}

.content {
  display: flex;
  border-bottom: 1px solid black;
  padding: 10px;
}

.title {
  font-size: 2rem;
  font-weight: bold;
}
</style>
</head>
<body>
  <div >
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/7/7a/Manchester_United_FC_crest.svg/800px-Manchester_United_FC_crest.svg.png" width="50" height="50">
    <span > Man Utd Merch</span>
  </div>
</body>
</html>

CodePudding user response：

You can use this code with flex:

<html lang="en">
<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">
    <title>Man Utd Merch</title>
<style>

.content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.title {
  margin: 0 0 0 10px;
}
</style>
</head>
<body>
  <div >
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/7/7a/Manchester_United_FC_crest.svg/800px-Manchester_United_FC_crest.svg.png" width="50" height="50">
    <span > Man Utd Merch</span>
  </div>
</body>
</html>