1

ここで JSFiddle を作成しました: http://jsfiddle.net/AsHW6/

私がやろうとしているのは、down_arrow.png を含む div の中央に配置することです。自動マージンを使用して up_arrow.png を中央に配置できました。解像度に関係なくdivの一番下に配置したいので、固定プロパティを使用してフッターとして使用しています。

私の質問は、それを含む div の幅内で下の固定画像を中央に配置する最良の方法は何ですか?

フィドルからのいくつかのコード（StackOverflowのフォーマットに問題があります）： 

    .scroll-arrow-down {
        position: fixed;
        bottom:0;
    }

IE のハック/回避策についてはまったく気にしないことを付け加えておく必要があります。このアプリケーションは IE をターゲットにすることは決してありません。コメントや回答をお待ちしております。

4

2 に答える 2

1

下向き矢印の画像を、下に揃えられるdivでラップできます。次に、divを設定してコンテンツを中央に配置できます。

HTMLでのラッピング：

<div id="list1">
  <img src="image/up_arrow.png" class="scroll-arrow-up">
  <p class="list-title" id="list-title1">Autonomous Behaviors</p>
  <div class=".scroll-arrow-down">
    <img src="image/down_arrow.png">
  </div>
</div>

およびcss：

.scroll-arrow-down {
  position: absolute;
  bottom: 0;
  background-color: red;
  width: 100%;
  text-align: center;
}
于 2013-01-09T05:51:20.793 に答える
1

固定位置を使用した場合、ビューポートに固定されます (これは望ましくないと思います)。絶対配置を使用すると、画像を含むアイテムを参照して画像が配置されます。

left:45%; を追加しました。これはほぼ中央に配置されますが、矢印の幅によっては更新が必要になる場合があります。

.scroll-arrow-down {
    position: absolute;
    bottom:0;
    left: 45%;
}

http://jsfiddle.net/AsHW6/1/

于 2013-01-09T06:03:33.960 に答える