align text at same horizontal align as image - html

Question

I want to make a logo which looks like this:
but I can't get it to work, this is what I have at the moment:
I want the logo on the left to be the same as the first picture I uploaded, does anyone know how to do this?
I tried with vertical-align: middle which doesn't work, and I tried display: flex and then align: center but that doesn't work either.
Here is my attempt:
header {
padding-top: 24px;
padding-bottom: 24px;
background: #1b1b2e;
width: 100%;
border-bottom: 1px solid black;
align-items: center;
display: grid;
grid-template-columns: 1fr 3fr;
}
header a {
text-decoration: none;
display: flex;
justify-content: space-between;
color: white;
}
header img {}
#nav {
display: flex;
justify-content: space-around;
}
#logo {
display: flex;
justify-content: space-around;
}
<header>
<div id="Logo"> <img src="img/logo_shape.png" alt="Logo">
<h1>Dublin apps</h1>
<h3>Ipad applications</h3>
</div>
<div id="nav">
Home Ipad Apps
Demonstrations
Leogards Media
connect us
</div>
</header>

Answer 1

As already mentioned Rickard Elimää your CSS targets #logo but your id says "Logo".
We must also put
      
flex-direction: column;
and some other adjustment to make it work.
I also created the graphic element in the css logo as it is very simple, if you want an image instead of the pseudo element you can put it inside h1 like this:
<h1><img src="path_to.png" alt="i">Dublin apps</h1>
and remove the css rules for the pseudo element.
#Logo h1:before
You will need to change the logo font to match the one in the image
header {
padding-top: 24px;
padding-bottom: 24px;
background: #1b1b2e;
width: 100%;
border-bottom: 1px solid black;
align-items: center;
display: grid;
grid-template-columns: 1fr 3fr;
}
header a {
text-decoration: none;
display: flex;
justify-content: space-between;
color: white;
}
#nav {
display: flex;
justify-content: space-around;
}
#Logo {
display: flex;
justify-content: space-around;
color: white;
flex-direction: column;
}
#Logo h1, #Logo h3 {
margin: 0;
}
#Logo h1 {
font-size: 24px;
display: flex;
align-items: center;
font-weight: 300;
}
#Logo h3 {
font-size: 14px;
padding-left: 24px;
font-weight: 300;
}
#Logo h1:before {
content: "i";
display: inline-block;
font-size: 14px;
color: black;
background-color: white;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50% 0 50% 50%;
margin-right: 4px;
}
<img src="https://i.stack.imgur.com/NPCDE.png" alt="">
<header>
<div id="Logo">
<h1>Dublin apps</h1>
<h3>Ipad applications</h3>
</div>
<div id="nav">
Home Ipad Apps
Demonstrations
Leogards Media
connect us
</div>
</header>

Answer 2

Try this answer.
header {
padding: 10px 20px;
background: #1b1b2e;
width: 100%;
border-bottom: 1px solid black;
align-items: center;
display: grid;
grid-template-columns: 1fr auto;
}
header img {
width: 25px;
margin-right: 5px;
}
#nav {
display: flex;
justify-content: space-around;
}
#nav a {
text-decoration: none;
color: white;
padding: 3px 5px;
margin: 0 2px;
}
#nav a.active {
background-color: #fff;
color: #111;
border-radius: 2px;
}
#logo {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.logo-text {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.logo-text h1, .logo-text h3 {
margin: 0;
color: #fff;
}
.logo-text h1 {
font-size:16px;
}
.logo-text h3 {
font-size:14px;
}
<header>
<div id="logo">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/512x512/plain/leaf.png" alt="Logo">
<div class="logo-text">
<h1>Dublin apps</h1>
<h3>Ipad applications</h3>
</div>
</div>
<div id="nav">
Home Ipad Apps
Demonstrations
Leogards Media
connect us
</div>
</header>

Answer 3

enter image description hereUse this css
#logo img{
margin:0 auto;
display:table;
}