对齐h5和社交媒体图标

Question

我正在尝试在页脚中添加共享功能。但是，该图标（具有指向IG的链接）显示在h5下方。我如何使图标和h5处于同一行？

这是我的HTML和CSS：

footer {
  background-color: black;
  line-height: 100px;
  height: 100px;
  border-top: 2px solid #f28600;
  text-align: center;
}

footer h5 {
  color: white;
  font-size: 16px;
}

footer a img {
  height: 25%
}

<footer> 
	<h5> © 2019 The Novel Column </h4>
	<a href="http://www.instagram.com"> <img src="https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-instagram-new-circle-512.png"> </a>	
</footer>

在此先感谢您的帮助！

Answer 1

使用适当的display:flex，您可以将两个元素放在同一行上。

footer {

  background-color: black;
   line-height: 100px;
  height: 100px;
  border-top: 2px solid #f28600;
  text-align: center;
  display: flex;
  align-items: baseline;

}

footer h5 {
  color: white;
  font-size: 16px;

}

<footer> 

	<h5> © 2019 The Novel Column </h4>

	<a href="http://www.instagram.com"> 
  <img src="https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-instagram-new-circle-512.png" width="20px"> </a>	

 


</footer>

您可以根据需要尝试使用justify-content。

---

参考

  

A Complete Guide to Flexbox