Question

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

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

我的问题是将底部固定图像置于其包含div的宽度内的最佳方法是什么？

来自小提琴的一些代码（我在使用StackOverflow格式时遇到问题）：

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

我应该补充一点，我根本不关心IE黑客攻击/解决方法，这个应用程序不会以任何方式针对IE。任何意见和答案都表示赞赏。

Answer 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;
}

Answer 2

如果您使用固定位置，它将被固定到视口（我认为您不想要）。使用绝对定位将定位图像以参考包含它们的项目。

我添加了左：45％;这几乎是事物的中心，但取决于可能需要更新的箭头的宽度。

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

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

在div中居中固定图像

2 个答案: