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