1

私はこれに頭を悩ませようとしていますが、あまり根拠がありません。ウィンドウサイズに合わせて自動スケーリングする背景画像があります。その前に、拡大縮小しながらページの下部に固定されている画像を中央に配置しようとしています。これは私が今持っているCSSです。

        #guys img{
            width:35%;
            margin-left:auto;
            margin-right:auto;
            bottom:0px;
            position: fixed;
        }

そして、これが私が言ったDIVと呼んでいる方法です

    <div id="guys">
        <img src="img/boys.png" alt="">
    </div>

私が最終的に得たのは、ページの下部に固定された画像であり、スケーラブルですが、中央に配置することもできませんでした. 何かご意見は？私はとても感謝しています！

4

2 に答える 2

1

私が見ることができるように、あなたの画像はすでにDivにあり、そのdivを相対的にし、マージンを画像と同じ幅で自動化し、すべてがうまく機能するはずです。

        #guys{
        position:relative;
        margin:auto;
        width:35%;

    }       
       #guys img{
        width:35%;
        bottom:0px;
        position: fixed;

    }
于 2012-09-11T02:40:18.863 に答える
0

何かを固定すると、マージンは自動的に機能しなくなります。

別の方法として、img に 50% の左の値 (ページの中央を画像の左側に揃える) を指定してから、margin-left に -17.5% を指定して、画像の中央をページの中央。

私のjsfiddleを参照してください。

抜粋：

#bottomCentered {

    left: 50%;
    margin-left: -17.5%; /* Half of the width */

    position: fixed;
    width:35%;
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    position: fixed;
    display: inline-block;
    height: 20px;
    background: #00FF00;
}
于 2012-09-11T02:31:28.907 に答える