inline-block aligning vertical by default

Question

I am making a social media bar at the bottom of a website and would like for all of the social media icons to line up horizontally. I have a parent div that encases the social media icon divs. I am trying to not only center the parent div on the page but also center all of the social media icons within that div.

When I use the inline-block tag all of my social media icons align vertically in the middle of the parent div. I have also tried floating them but cannot seem to figure out how to center them with that format either.

Any help would be greatly 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');
}

Answer 1

You need to assign the inline-block to the DIV tags that enclose the a tags like the below:

#socialcontainer > div{ display: inline-block;}

Answer 2

Try this: add to the CSS of each enveloping <div> the following attribute: display:inline.