CODEWITHSUNDEEP
csswordpresswordpress-theminghtml-lists
Rodrigo Arano
Rodrigo Arano

Reputation: 23

Center items in list (CSS)

I need to center the items on a list of my social-media menu (the 4 icons under the title on the sidebar). I got to made them distribute evenly (each item width is 25% since I have 4), the "ul" is displayed as table. However, the icons inside each "li" stick to the left ! Any ideas ? THANKS !

http://www.blogderod.com/

.social-navigation {
margin: 0 15% 10%;
display: table;
width: 70%;
}

.social-navigation li {
display: inline-block;
text-align: center;
float: none;
width: 25%;
}

Upvotes: 0

Views: 360

Answers (4)

Tommy Jinks
Tommy Jinks

Reputation: 757

Add the following to your CSS:

.social-navigation a,
.social-navigation a:before {
    width: 100%;
}

This makes both the link and the social icon take up the full width of the li, allowing them both to centre correctly.

Upvotes: 1

probikram
probikram

Reputation: 26

Make this changes in your CSS

media="all"
.social-navigation a:before {
content: "\f415";
font-size: 24px;
/* position: absolute; */
/* top: 0; */
/* left: 0; */
}

Hope that helps

Upvotes: 0

haykou
haykou

Reputation: 387

Edit this class like this:

.social-navigation a:before {
content: "\f415";
font-size: 24px;
position: absolute;
top: 0;
left: 20px;

Change top/left position as you wish.

Upvotes: 0

EricL
EricL

Reputation: 959

Add "text-align: center;" on the LIs and make the links inside the LIs "display: inline-block;".

Upvotes: 1

Related Questions