对齐徽标和h1以获得完整的标题响应

Question

我有一个由两个单词组成的标题，第一个单词出现在徽标中，第二个单词用h1加上它。如何对齐图像和h1以获得完整的标题并具有响应性？ 我想得到的结果是这样的：http://i65.tinypic.com/34t9ukj.png

html是：

<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

您可以使用flexbox，a标记作为容器，使用align-items: center;获取垂直居中对齐：

#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>

第二种解决方案是使用以下设置制作内部项内联块：

#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>

缺点是，在这种情况下，不是整个标题区域（我假设这应该是）可以作为链接点击，但只有图像和h1本身，而在flexbox解决方案中也可以点击h1的上方和下方打开链接。