11

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

4

3 に答える 3

25

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

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

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

于 2010-04-03T10:33:59.233 に答える
3

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

div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}
于 2010-04-03T10:55:18.067 に答える
3

古い質問ですが、これが私が思いついた最善の解決策です。画像をコンテナ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>
于 2013-07-18T16:58:13.127 に答える