Jump to content

CSS help centering images side by side


coolgirl1

Recommended Posts

Hello!I have been learning CSS for a while and enjoy it very much. I am baffled by something though. I want to align images side by side on the bottom of my webpage. They are a facebook icon, twitter icon, google plus icon, and so on. I hyper linked them so people can click them to get to my pages. However, doing this seems hard. I have heard many different ways to do it but it doesn't work well.What I did myself was this code in CSS. Here is what I have. CSS PART img.center{margin-left:15cm;} img.center1{margin-right:14cm;} HTML PART <a href="http://www.facebook.com"> <img class="center" src="facebook.ico"> </a><a href="http://www.twitter.com"> <img class="center1" src="twitter.ico"> </a> While that did indeed work, it put a small blue line in between the two icons. I think it is part of the hyperlink.Any ideas on how to do this or if there is a right way? I would appreciate any help. If you want, I would be happy to email a copy of my website to show you the icons.Thanks.

Link to comment
Share on other sites

Hi, thank you for getting back to me. I appreciate your time.I have been learning from that website. Great site! I re-did the code and it seemed to come out right but I wanted to double check with you. I did this. img.fbook{position:absolute;middle:0px;margin-left:16cm;} img.twitter{position:absolute;middle:0px;margin-left:14cm;} img.googleplus{position:absolute;middle:0px;margin-left:12cm;} html <a href="http://www.facebook.com"> <img class="fbook" src="facebook.ico"> </a><a href="http://www.twitter.com"> <img class="twitter" src="twitter.ico"> </a><a href="http://www.plus.google.com"> <img class="googleplus" src="google.ico"> </a>

Edited by coolgirl1
Link to comment
Share on other sites

Are you just trying to get them centered at the bottom of your site? Take a look at the following and see if it helps you:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css">  div {text-align: center; } div a {text-decoration: none;}  </style></head> <body><div><a href="http://www.facebook.com"> <img src="facebook.ico" /> </a><a href="http://www.twitter.com"> <img src="twitter.ico"  /> </a></div> </body></html>

Just place your links/images in a div container and apply text-align: center to it. They should center since they're inline elements. To get rid of any under lines from lines, apply text-decoration: none to the a element that's inside the div container.

Edited by Don E
  • Like 1
Link to comment
Share on other sites

Also, If you define a width , you can use margin: 0 auto;

Link to comment
Share on other sites

Position property, should not be used that way! Here is an example, on how to do it:HTML:

<ul id='Social'><li><a href="facebook.com/username"> <img src="facebook.ico"/></a></li><li><a href='twitter.com/username'> <img src='twitter.ico'/></a></li></ul>

CSS:

ul#social li{float:left; list-style-type:none; margin-left:10px;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...