CODEWITHSUNDEEP
htmlcss-floatcss
Hunter Sneed
Hunter Sneed

Reputation: 33

inline-block aligning vertical by default

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');
}

Upvotes: 3

Views: 494

Answers (4)

Muhammad Ahsan
Muhammad Ahsan

Reputation: 1954

I think you need to create a new div inside container to control the position as you want inner-content to be center horizontal I think it is the easiest solution see my JS bin

here is the code for the solution i propose

Upvotes: 0

Ashis Kumar
Ashis Kumar

Reputation: 6554

Please try this modified css to your html,

#socialcontainer {
position: relative;
width: 256px; // 64 * 4
left: 50%;
margin: 0px auto;
margin-left: -128px;
text-align: center;
}

.facebook, .twitter, .google, .linkedin { width: 64px; float: left; }

.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');
}

Upvotes: 1

ygesher
ygesher

Reputation: 1161

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

Upvotes: 1

Harry
Harry

Reputation: 89780

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

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

Upvotes: 1

Related Questions