align logo and h1 to obtain full title responsive - html

Question

I have a title composed of two words, the first word appears in the logo, the second I add it with a h1. How do i do to align image and h1 to get the full title and is responsive?
The result I want to get is something like this: http://i65.tinypic.com/34t9ukj.png
The html is:
<div id="header">
<a href="xxxxx.html">
<img src="img/logo.jpg" id="logo" alt="logo">
<h1 id="titolo_logo"> Abbigliamento </h1>
</a>
</div>

Answer 1

You can use flexbox, with the a tag as the container and align-items: center; to get the vertically centered alignment:
#header a {
display: flex;
align-items: center;
}
h1 {
margin-left: 10px;
}
<div id="header">
<a href="xxxxx.html">
<img src="http://placehold.it/150x150/fb3" id="logo" alt="logo">
<h1 id="titolo_logo"> Abbigliamento </h1>
</a>
</div>
A second solution would be to make the inner items inline-blocks, with the following settings:
#header a > img,
#titolo_logo{
display: inline-block;
vertical-align: middle;
}
#titolo_logo {
padding-left: 10px;
}
<div id="header">
<a href="xxxxx.html">
<img src="http://placehold.it/150x150/fb3" id="logo" alt="logo"><h1 id="titolo_logo">Abbigliamento</h1>
</a>
</div>
The disadvantage is that in this case not the whole header area (which I assume this is supposed to be) is clickable as a link, but only the image and the h1 themselves, whereas in the flexbox solution you can also click above and below the h1 to open the link.