CODEWITHSUNDEEP
htmlcss
scapegoat17
scapegoat17

Reputation: 5821

Social icons in footer

Here is my html:

<div class="footer-social">
    <span>Connect with us:</span>
    <li><a href="http://www.facebook.com">
        <img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' />
    </a></li>
<li><a href="http://www.twitter.com">
    <img src='http://grfx.cstv.com/schools/wis/graphics/icon_twitter24.jpg' />
</a></li>
<li><a href="http://www.youtube.com">
    <img src='http://mylzh.net/wiki/worldofwarcraft/images/5/5d/Icon-youtube-22x22.png' />
</a></li>

and here is my css:

.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;}
.footer-social span { margin-top: -20px;}

jsfiddle: http://jsfiddle.net/qNTL2/

I want the "Connect with us:" to be centered with the images, but it seems no matter how hard i try, it isn't working out. Anybody know why or possibly have a solution to my issue?

Any help would be much appreciated! Thanks!

Upvotes: 1

Views: 23972

Answers (2)

Carl0s1z
Carl0s1z

Reputation: 4723

First you need to add <ul> and </ul> when using <li> and then i dont know how you want it centered, so i made 2 demo's for you.

You mean centered like this?

.footer-social { float: right; margin-top:5px; height:30px; }
.footer-social ul {float:left; padding:0; margin:0;}
.footer-social li {float:left; list-style:none; margin-left:5px;}
.footer-social span { float:left; }

DEMO

Or more like this?

.footer-social { float: right; margin-top:5px; }
.footer-social ul { padding:0; margin:0 0 0 10px;}
.footer-social li {float:left; list-style:none; margin-left:5px;}

DEMO 2

Upvotes: 3

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Edited CSS of yours

.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;float:right;}
.footer-social span { margin-top: -20px;}

Edited this part

 .footer-social li { display: inline;float:right;}

Fiddle Demo

Upvotes: 0

Related Questions