CSS Make an image and title align [duplicate] - html

Question

This question already has answers here:
Vertically align text next to an image?
(26 answers)
Logo image and H1 heading on the same line
(13 answers)
Closed 3 years ago.
I'm working on trying to create a website, and I want an image to appear to the right side of the title I have picked, but I cant find any way to align them that properly works.
.title {
background-color: white;
color: black;
width: 680px;
}
.logo {
width: 100px;
height: 100px;
}
<div class="title">
<h1>
<font size="+10" /><u/>Computer Science A-Level Notes</h1>
<img class="logo" src="breh.png">
</div>
can anyone tell me what I can do?

Answer 1

There are a lot of ways to align two elements horizontally. The two modern way to achieve this is to rely on flexbox or css grid.
Here is a basic usage of flexbox:
.title {
background-color: white;
color: black;
width: 680px;
}
.logo {
width: 100px;
height: 100px;
}
div {
display: flex;
flex-direction: row;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo" src="https://via.placeholder.com/100x100">
</div>
Related to Flexbox: center horizontally and vertically

Answer 2

Try this:
.title{
background-color: white;
color: black;
width: 680px;
display: inline-flex;
}
.logo{
width: 100px;
height: 100px;
float: right;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo"src="images/1.jpeg">
</div>

Answer 3

Here is how you can do it with flexbox.
.title {
display: flex;
align-items: center;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo"src="https://picsum.photos/200/200">
</div>

Answer 4

You need to make both things inside the .title class have a inline-block alignment, and for the best look you should set the vertical-align property on both.
.title {
background-color: white;
color: black;
width: 680px;
}
.title h1 {
display: inline-block;
vertical-align: middle;
}
.title .logo {
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo" src="https://placehold.it/100x100">
</div>

Answer 5

You can also do it without using flexbox
by simply applying this css
.title{
background-color: white;
color: black;
width: 680px;
}
.title *
{
float:left;
}
.logo{
width: 100px;
height: 100px;
}