1

我在这里创建了一个 JSFiddle:http: //jsfiddle.net/AsHW6/

我正在尝试做的是让 down_arrow.png 以它们包含的 div 为中心。我能够使用自动边距使 up_arrow.png 居中。我使用 fixed 属性将它们用作页脚,因为我希望它们位于 div 的底部,而不管分辨率如何。

我的问题是将底部固定图像居中在其包含 div 的宽度内的最佳方法是什么?

小提琴中的一些代码(我在使用 StackOverflow 格式时遇到问题):

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

我应该补充一点,我根本不关心 IE hacks/workarounds,这个应用程序不会以任何方式针对 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 回答