将图像放在 h1 旁边

Question

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

Answer 1

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

Answer 2

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 class="head"> <img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic"> <h1 class="home" 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 class="head"> <img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic"> <h1 class="home" 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 .