Как приклеить изображение к нижней части видимого экрана и отцентрировать его?

Question

У меня есть веб-сайт, и мне нужно, чтобы изображение располагалось по центру внизу видимой страницы. Таким образом, при любом размере экрана изображение все равно будет внизу и будет центрировано.

Answer 1

используя чистый CSS, вы можете добиться этого во всех новых браузерах

.fix{
    position:fixed;
    bottom:0px;
    left:50%;
}
<img src="yourimagepath" class="fix"/>

и для IE6 вы можете использовать position:absolute; вместо фиксированного. Это помещает изображение внизу страницы, но при прокрутке вверх изображение прокручивается вместе со страницей. К сожалению, position:fixed не поддерживается в IE6.

Answer 2

Старый вопрос, но вот лучшее решение, которое я придумал. Поместите изображение в контейнер div, div расположен внизу экрана, а изображение центрируется внутри него. У div установленная ширина 100%, поэтому изображение может центрироваться правильно. Для работы margin:auto; изображение должно отображаться как элемент таблицы с display:table;

Использование display:table; означает, что вам не нужно устанавливать фиксированную ширину для элемента, который вы хотите центрировать.

    <style>
    .sticky-image-wrapper{
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .sticky-image-wrapper img{
        display: table;
        position: relative;
        margin: auto;
   }
   </style>

    <div class="sticky-image-wrapper">
       <img src="myimage.jpg" />
    </di>

Answer 3

Вы должны поместить его в div, а затем представить, что ваше изображение имеет ширину 500px:

div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}