对齐 logo 和 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上方和下方打开链接。