Put image next to h1-CodePudding

How do I put the image next to the h1 text? The image on the left and the text on the right. Thanks in advance!

img {
   width: 150px;
   height: 150px;
}
h1 {
   padding: 25px;
   border: 0px;
   margin: 0px;
   height: 30%;
   width: 70%;
}

<header >
            <img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" >
            <h1  id="home">Hi</h1>

CodePudding user response：

Either add float: right to h1:

img {
  width: 150px;
  height: 150px;
}

h1 {
  float: right;
  padding: 25px;
  border: 0px;
  margin: 0px;
  height: 30%;
  width: 70%;
}

<header >
  <img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" >
  <h1  id="home">Hi</h1>

Or display: inline-block to h1:

img {
  width: 150px;
  height: 150px;
}

h1 {
  display: inline-block;
  padding: 25px;
  border: 0px;
  margin: 0px;
  height: 30%;
  width: 70%;
}

<header >
  <img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" >
  <h1  id="home">Hi</h1>

Keep in mind that the image has a fixed width and the text has a relative width, so it will automatically flow over to the next line if the total width allowance is exceeded. To prevent this, simply set width: fit content on the h1.

CodePudding user response：

It may be most efficient to use flexbox to resolve this layout issue. Adding display: flex; to the parent element will create the row layout you're looking for and some additional CSS properties will center the children elements if desired. Check out the complete guide here to really control the position of every element if needed.

.head {
  display: flex;
  justify-content: center;
}

img {
  width: 150px;
  height: auto;
  max-width: 100%;
}

h1 {
  padding: 25px;
  border: 0;
  margin: 0;
  align-self: center;
}

<header >
  <img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" >
  <h1  id="home">Hi</h1>
</header>