我有一个由两个单词组成的标题,第一个单词出现在徽标中,第二个单词加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>

最佳答案

您可以使用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下面打开链接。

10-05 20:53
查看更多