CODEWITHSUNDEEP
htmlcss
Henry Wang
Henry Wang

Reputation: 171

Align h5 and Social Media Icon

I am trying to add sharing functionality in my footer. However, the icon (which has a link to IG) is appearing below an h5. How would I get the icon and the h5 to be on the same line?

Here is my HTML and 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>

Thanks in advance for your help!

Upvotes: 0

Views: 357

Answers (1)

Pol
Pol

Reputation: 1341

With the propriety display:flex you can put two elements on the same line. 

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>

You can use the propriety justify-content depends on what your trying to do.

justify-content exemple

Reference

A Complete Guide to Flexbox

Upvotes: 1

Related Questions