CODEWITHSUNDEEP
htmlvertical-alignmentcss
FuManchuNZ
FuManchuNZ

Reputation: 185

Vertically centered inline-block div not aligning properly

I am having some difficulty getting this inline-block div to center align properly as the two elements above it do.

The div which I am referring specifically to is the one which contains the three "social" icons at the bottom section underneath 'Interact with me' (please see here)

I assume that it is the float on the icons that is throwing it off whack which is why I have the wrapper div around it (.interact-social) to try to offset it, but it doesn't seem to be working as it should...? have already spent the better part of the day just trying to figure it out, to no avail.. :(

Any assistance greatly appreciated as usual, thanks!

edit:

Here was the relevant code for anyone interested:

.social {
height: 50px;
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}

was simply missing a width declaration (which I had unsuccessfully tried apply to other divs)!

Upvotes: 1

Views: 122

Answers (2)

Niklas
Niklas

Reputation: 13135

Try making these changes to your css:

.interact {
    width:95%;
}

.social li {
    float:left;
}

.interact-social {
    /*width:30%; Remove this width */
}

Upvotes: 1

Carol McKay
Carol McKay

Reputation: 2424

Add this to your code:

.social
{
  width:240px;
}

Upvotes: 2

Related Questions