Floated link within a div screws up centering of image on same line

Question

Hello, first off I would like to say thanks to those who have helped me out before on here.

Ok the problem is this: I have several images which are placed inside a a div called "Banner" at the top of my web site. I also have a text link to facebook which is floated to the right. They are each centered using the following css...

        #banner img {border:none;
         margin:0 auto;
         display:block;
         }
        a#social_network {
              float:right;
              margin:10px;
              padding:0px;
              }

I have also floated a link to facebook to the right, which is given an id called "social_network" and is also within the banner div. The problem is that when I float this textual link right my top image is no longer centered. I thought that maybe I needed to clear the float but that did not work I was doing it wrong.

All suggestions are appreciated.

Answer 1

Maybe you can try this:

#banner { 
    position: relative:
}

#banner img {
    border: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px; /* <--- Here's 1/2 of the width of the image */
    margin-top: -50px; /* <--- Here's 1/2 of the height of the image */
}