CODEWITHSUNDEEP
htmlcssiconsalignmentfooter
Sasha Essentialz Jevremovic
Sasha Essentialz Jevremovic

Reputation: 59

How do i get social media icons to align in footer?

I am currently working on my new site www.jobreviewboard.com and I am having issues aligned the social media icons in the footer. if you go on the site you will see what I mean with the twitter icon. this is what I have in my footer now. any help would be appreciated!:) I have tried adding a main div for all 4...no luck. tried separate divs..no luck...tried no div...no luck

 <footer>
 <font style="color:#FFFFFF;font-size:10.5pt;"><div style="margin-top:-20px;margin-left:20px;">Copyright © 2014 Job Review Board. All Rights Reserved. Love or Hate your Job? Review it here!

 <div>
 <a href="http://linkedin.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/linkedin.png" border="0" style="margin-left:700px;margin-top:8px"/>

 <a href="http://googleplus.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/gplus.png" border="0" style="margin-left:710px:margin-top:8px;"/>

 <a href="http://googleplus.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/fb.png" border="0" style="margin-left:720px:margin-top:8px;"/>

 <a href="http://googleplus.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/twitter.png" border="0" style="margin-left:860px;margin-top:-200px;"/>
 </div>

 </div></font>

 </footer>

Upvotes: 1

Views: 7495

Answers (2)

Wide Vision
Wide Vision

Reputation: 15

Try this for existing structure asked in question 

font > div > div {
text-align: center;
}
div > a {
display: inline-block;
}

div > a > img{margin:5px}

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28593

put the elements in a list (ul li) and then style your list with 

list-style: none;
text-decoration:none;
display:inline-block;  
float:right;
position: relative;

here is a working fiddle of your footer

Upvotes: 1

Related Questions