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

Ответ 1

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

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

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

Ответ 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>

Ответ 3

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

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