Inlining logo with header element - html

Question

HTML Code:
<div class="header">
<img src=".jpg" width="240" height="180" >
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</div>
CSS:
.header{
background-color: rgb(255,255,255,0.7);
}
.header img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
position: relative;
top: 18px;
left: 50%;
padding: 12.5px
}
.header p {
position: relative;
top: -25px;
left: 50%;
padding: 12.5px
}
How can I put <img> inline with my <h1> ?

Answer 1

You can do that very easily using flexbox:
header {
display: flex;
align-items: center;
justify-content: center;
}
header img {
width: 100px;
height: 100px;
background: #555;
margin-right: 20px;
}
<header>
<img>
<div>
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</div>
</header>
You can read more about flexbox here: https://internetingishard.com/html-and-css/flexbox/
Also, you could replace <div class="header"> with a <header> element here to make your HTML more semantic. I did that in the example already.

Answer 2

You can do with display property:
.header {
background-color: rgb(255, 255, 255, 0.7);
}
.header img {
width: 100px;
height: 100px;
background: #555;
display:inline-block;
vertical-align:middle;
}
.header-text{
display:inline-block;
vertical-align:middle;
padding-left:10px;
}
.header h1 {
margin:0 0 10px 0;
}
.header p {
margin:0
}
<div class="header">
<img src=".jpg" width="240" height="180">
<div class="header-text">
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</div>
</div>

Answer 3

Try this code
.header{
display:flex;
align-items:center;
justify-content:center;
}
.header img {
width: 100px;
height: 100px;
background: #555;
margin-right: 20px;
}
.header-content h1 {
margin-top: 0px;
}
.header-content p {
margin-bottom: 0px;
}
<div class="header">
<img src=".jpg" width="240" height="180" >
<div class="header-content">
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</div>
</div>