Плавающая ссылка в div делит вверх центрирование изображения на той же строке

Question

Прежде всего, я хотел бы сказать спасибо тем, кто помог мне раньше здесь.

Хорошо, проблема в том, что у меня есть несколько изображений, которые помещены в div, называемый «Баннер». в верхней части моего веб-сайта. У меня также есть текстовая ссылка на Facebook, которая всплывает справа. Каждый из них центрируется с использованием следующего css ...

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

Я также разместил ссылку на Facebook справа, которой присвоен идентификатор "social_network", и он также находится внутри баннера div. Проблема в том, что когда я плаваю по этой текстовой ссылке, мое верхнее изображение больше не центрируется. Я подумал, что, возможно, мне нужно очистить поплавок, но это не сработало, я делал это неправильно.

Все предложения приветствуются.

Answer 1

Может быть, вы можете попробовать это:

#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 */
}