如何將固定大小容器的圖像居中並將固定大小的下載按鈕放置在同一圖像的左下角？

Question

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

在細節：

• 我有圖片組一個大容器。
  
• 在那個容器中，我有100x100 px容器左右擺動。
  
• 在每個容器中，我都有兩個由錨標記包圍的圖像（兩者看起來都很像：<a href="/action1"><img src="/thumbnail.jpg" /></a><a href="/action2"><img src="download_button.jpg" /></a>）。
  
• 第一個圖像/鏈接是縮略圖。縮略圖的大小可能會有所不同，但高度不會超過100像素，寬度不能超過100像素。這是從服務器端知道的。基本上，縮略圖的鏈接是用於調用燈箱功能（我在這裏跳過描述燈箱功能，只知道它是）。
  
• 第二個圖像/鏈接是種下載按鈕。該按鈕始終是20x20px。這是用於下載相同圖片的最大版本。
  
• 縮略圖必須位於浮動100x100 px div的中間/中間位置。
  
• 下載按鈕（a/img標籤）必須位於縮略圖的左下角。

問題：

的問題是，我無法弄清楚如何使主圖像的100x100的容器的中央/中心內，並放置在左側底角20×20下載按鈕圖片。迄今爲止我所取得的最好的版本可以在上面提到的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; 

Answer 2

在你的div裏創建figure元素，然後figcaption，這個figcaption總是在左下方。在這個figcaption中創建你的按鈕。可能是它的幫助。

<figure> 
<img src="abcsd" alt="dsaer" width="304" height="228"> 
<figcaption>Your Button</figcaption> 
</figure>