让 3 张图像粘在父 div 底部的中心，彼此相邻

Question

以上基本上是我的问题。我已经浏览了关于 SO 的其他一些问题，但最接近的是大约 1 个元素，不必在中心。

我基本上在一个不可见的包装器div 中有三个相邻的图像，在这里找到：http://korilu.nl/maurits/search.html

我想要的是防止两个小图像在单击一个图像时上下移动。
我试图按照上面提到的问题的建议将position:relative;放在包装纸上并position:absolute; bottom:0;图像上，但是它们不再位于中间，而是在左上角相互重叠。我该怎么做？

编辑：或者顶部或中心，我不在乎，只要他们停止移动

Answer 1

你只需要改变你的jQuery脚本：

$("a").click(function(){
                $(current).animate({
                    opacity: .5,
                    height: '100px', 'margin-top': '100px'
                });
                $("img", this).animate({height: '200px','margin-top': '0px', opacity: 1});
                current = "#" + $(this).find("img").attr("id");
            });

请注意两个新出现的边距顶部。在您的网站上试用了它，并按照您想要的方式工作。

Answer 2

#icons
{
  text-align:center;
  height:20%;
  display: block;
  width: 405px;
  margin: 0 auto;
}
#icons a
{
  float: left;
}

立即

删除其中一个链接上的边距/填充。我将宽度设置为 405px，因为您可能会有一些样式将其中一个推送到下一行。

Answer 3

尝试使包装器div 也相对，然后绝对属性将从包装器而不是整个文档中计数。

然后，您可以通过设置左：0; 底部：0; 和右：0; 底部：0; 为左右图标。