I am working on implementing a horizontal social media bar at the bottom of my website. I want all the social media icons to align in a straight line. The parent div contains the social media icon divs and I am trying to center both the parent div and the icons within it.
When using the inline-block tag, the social media icons are aligning vertically in the middle of the parent div. I have also experimented with floating them but haven't been able to achieve the desired center alignment.
Any assistance on this matter would be highly appreciated.
HTML:
<div id="socialcontainer">
<div class="facebook"><a href="https://facebook.com/"></a></div>
<div class="twitter"><a href="https://twitter.com/"></a></div>
<div class="google"><a href="https://google.com/"></a></div>
<div class="linkedin"><a href="https://linkedin.com/"></a></div>
</div>
CSS:
#socialcontainer {
width: 100%;
margin: 0px auto;
text-align: center;
}
.facebook a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/facebook_dark.png');
}
.facebook a:hover {
background: url('../img/socialicons/facebook_active.png');
}
.twitter a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/twitter_dark.png');
}
.twitter a:hover {
background: url('../img/socialicons/twitter_active.png');
}
.google a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/google_dark.png');
}
.google a:hover {
background: url('../img/socialicons/google_active.png');
}
.linkedin a {
height:64px;
width:64px;
display: inline-block;
background: url('../img/socialicons/in_dark.png');
}
.linkedin a:hover {
background: url('../img/socialicons/in_active.png');
}