html - 如何将固定大小容器的图像居中并将固定大小的下载按钮放在同一图像的左下角？

Question

在行动:
http://jsfiddle.net/paulius_m/1xq2gn9s/4/

详情:

• 我有一个大容器可以装一组图片。
  
• 在那个容器中，我有一个 100x100 像素的容器漂浮在另一个旁边。
  
• 在这些容器中的每一个中，我都有两张图像被 anchor 标记包围(两者看起来都很接近:<a href="/action1"><img src="/thumbnail.jpg" /></a><a href="/action2"><img src="download_button.jpg" /></a>)。
  
• 第一个图像/链接是缩略图。缩略图的大小可能会有所不同，但绝不会超过 100 像素的高度和 100 像素的宽度。这是从服务器端知道的。基本上，缩略图的链接用于调用灯箱功能(我在这里跳过描述灯箱功能，只知道它是)。
  
• 第二张图片/链接是一种下载按钮。该按钮始终为 20x20 像素。这是为了下载同一张图片的最大版本。
  
• 缩略图必须位于 float 100x100 像素 div 的中间/中心。
  
• 下载按钮(a/img 标签)必须位于缩略图的左下角。

问题:

问题是我无法弄清楚如何在 100x100 容器的中间/中心对齐主图像并将 20x20 下载按钮放置在图像的左下角。可以在上面提到的 jsfiddle 链接中看到我迄今为止取得的最佳版本。

编辑:
- 下载按钮必须始终位于图像上方。

标记(与 jsfiddle 链接中的相同):
(HTML)

<div class="images">
    <div class="image_container_outer">
        <div class="image_container_inner">
            <a href="http://lorempixel.com/100/67/" class="uploaded_image">
                <img src="http://lorempixel.com/100/67/" class="uploaded_image">
            </a>
            <a href="bigger_image.png" download="bigger_image.png" class="download_button">
                <img src="http://goo.gl/vEUcp6" class="download_button">
            </a>
        </div>
    </div>

    <div class="image_container_outer">
        <div class="image_container_inner">
            <a href="http://lorempixel.com/100/67/" class="uploaded_image">
                <img src="http://lorempixel.com/100/67/" class="uploaded_image">
            </a>
            <a href="bigger_image.png" download="bigger_image.png" class="download_button">
                <img src="http://goo.gl/vEUcp6" class="download_button">
            </a>
        </div>
    </div>

    <div class="image_container_outer">
        <div class="image_container_inner">
            <a href="http://lorempixel.com/60/100/" class="uploaded_image">
                <img src="http://lorempixel.com/60/100/" class="uploaded_image">
            </a>
            <a href="bigger_image.png" download="bigger_image.png" class="download_button">
                <img src="http://goo.gl/vEUcp6" class="download_button">
            </a>
        </div>
    </div>

    <div class="image_container_outer">
        <div class="image_container_inner">
            <a href="http://lorempixel.com/100/67/" class="uploaded_image">
                <img src="http://lorempixel.com/100/67/" class="uploaded_image">
            </a>
            <a href="bigger_image.png" download="bigger_image.png" class="download_button">
                <img src="http://goo.gl/vEUcp6" class="download_button">
            </a>
        </div>
    </div>

    <span class="clear_left"></span>
</div>

(CSS)

.image_container_outer {
    display: block;
    float: left;
    height: 105px;
    padding-top: 5px;
    text-align: center;
    vertical-align: middle;
    width: 110px;
    background-color: #000;
    border: 1px solid #ffff00;
}


.image_container_inner {
    display: inline-block;
    height: 100px;
    position: relative;
    width: 100px;
    background-color: #999;
}

a.uploaded_image {
    bottom: 0;
    display: inline-block;
    left: 0;
    position: absolute;
}

img.uploaded_image {
    border: 0 none;
    border-radius: 2px 0;
    bottom: 0;
    box-shadow: 5px 5px 50px -6px rgba(50, 50, 50, 0.3);
    display: inline-block;
    left: 0;
    position: absolute;
}


a.download_button {
    bottom: 0;
    display: inline-block;
    left: 0;
    position: absolute;
}

img.download_button {
    background-color: #fff;
    border-radius: 2px;
    bottom: 0;
    display: inline-block;
    left: 0;
    position: absolute;
    width: 20px;
}

Answer 1

这是一个 JSFIDDLE解释这是如何工作的。这是一个JSFIDDLE从你的代码

要将某些东西放在绝对中心，请像这样使用 css:

position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

并放置在左下角使用像这样的CSS:

position:absolute;
bottom:0;
left:0;

要使按钮位于图像之上，您可以使用:

z-index: 9999;