web-dev-qa-db-ja.com

表示されている画面の下部に画像を貼り付けて中央に配置するにはどうすればよいですか？

Webサイトがあり、表示されているページの下部の中央に画像を配置する必要があります。そのため、どの画面サイズでも、画像は下部にあり、中央に配置されます。

csscentersticky
10
Shawn

純粋なCSSを使用すると、すべての新しいブラウザでこれを実現できます

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

iE6の場合、fixedの代わりにposition:absolute;を使用できます。これにより、画像がページの下部に配置されますが、上にスクロールすると、画像はページとともにスクロールします。残念ながら、position:fixedはIE6ではサポートされていません。

23
Pankaj Kumar

古い質問ですが、これが私が思いついた最善の解決策です。画像をコンテナ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
stuyam

それをdivに入れて、画像の幅が500pxであると想像してください。

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