html - 对齐 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