複雜的CSS圖像居中幫助？

Question

我的問題比標題說得複雜一點。對不起，我不知道如何更具體...

我正在一個網站上，我遇到了一個部分，我應該顯示一些縮略圖。事情是，縮略圖的尺寸不匹配。 （我知道，這聽起來很可笑，因爲這是縮略圖，對吧？）不，沒有辦法在相同的尺寸下創建它們！我已經設法創建了一個HTML + CSS結構來解決這個問題，並且如果圖像尺寸較小而且保持縱橫比不變，則圖像不會伸展以適合它們的容器。

剩下的唯一問題是將圖像居中。由於將邊距設置爲「0 auto」或「auto 0」沒有幫助，因此我嘗試設置multiple containers and setting the margins來定位圖像。這也不起作用：如果我將120x120圖片放入120x80內部容器中，並將容器的頂部和左側邊距設置爲-50％，則邊距將變爲-60px。這可以解決嗎？還是有另一種方法來中心圖像？

我願意接受任何建議！

HTML：

<div id="roll"> 
<div class="imgfix"> 
    <div class="outer"> 
     <div class="inner"> 
      @if (ImageDimensionHelper.WhereToAlignImg(item.Width, item.Height, 120, 82) == ImgAlign.Width) 

      <!-- ImageDimensionHelper tells me if the image should fit the 
      container with its width or height. I set the class of the img 
      accordingly. --> 

      { 
      <img class="width" src="@Url.Content(item.URL)" alt="@item.Name"/> 
      } 
      else 
      { 
      <img class="height" src="@Url.Content(item.URL)" alt="@item.Name"/> 
      }  
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.imgfix{ overflow:hidden; } 
.imgfix .outer { width:100%; height:100%;} 
.imgfix .inner { width:100%; height:100%; margin-top:-50%; margin-left:-50%; } 
/*This div (.inner) gets -60px for both margins every time, regardless of the size of itself, or the image inside it*/ 
#roll .imgfix { width:120px; height:82px; border: 1px #5b91ba solid; } 
#roll .imgfix .outer { margin-top:41px; margin-left:60px; } 
/*since I know specificly what these margins should be, I set them explicitly, because 50% got the wrong size.*/ 
#roll .imgfix img.width { width:120px; height:auto; margin: auto 0; } 
#roll .imgfix img.height { height:82px; width:auto; margin: 0 auto; } 

Answer 1

如果我理解正確 this demo應該做你想要什麼。但是，它不適用於所有瀏覽器。所以如果你需要支持IE6/7，那麼這不是正確的解決方案。

編輯：

我的問題比冠軍更復雜一點說

這是一種輕描淡寫！

我想我有something working，雖然你需要添加一些內聯樣式取決於圖像的大小。大多數CSS是共享的，因此只有需要設置的margin-left和margin-top取決於您要居中的圖像是大於還是小於一個或兩個縮略圖尺寸（在此示例中爲120x80px）。

我從您的問題中看到，您知道服務器端代碼中的圖像尺寸，因此您應該能夠推廣邏輯以爲每個圖像創建必要的內聯樣式。總之，我使用2的任何給定的img

img.stretchHorizontal { /* use when img width < 120px */ 
    width:100%; 
} 
img.stretchVertical { /* use when img height < 80px */ 
    height:100%; 
} 

剩餘CSS通用風格的完整性：

.outer { 
    width:120px; 
    height:80px; 
    border:1px #5b91ba solid; 
    overflow:hidden; 
    display:inline-block; /* not necessary, but nice for demo */ 
} 
.inner { 
    width:120px; 
    height:80px; 
} 
#roll { 
    margin:100px 0 0 100px; /* just to move everything down and left a bit */ 
} 

然後根據是否有圖像需要.stretchHorizontal或.stretchVertical，添加計算margin-top，margin-left或者同時使用margin-top和margin-left。一般規則似乎是：

• 如果stretchVertical添加margin-left:(scaled img width/-2)+(inner width/2)
• 如果stretchHorizo​​ntal添加margin-top:((scaled img height)/-2)+(inner height /2)
• 如果沒有需要拉伸（IMG比120x80大）添加margin-top:img height - 80/-2和margin-left:(img width/-2)+(inner width/2)

的demo使用幾個不同的圖像大小作爲示例。

<div id="roll"> 
    <div class="outer"> 
     <div class="inner" style="margin:-20px 0 0 0"> 
      <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/100 * 100 = 120)/-2)+ 40 = -20px --> 
      <img class="stretchHorizontal" src="viewport/yoda.jpg" alt=""/> <!-- 100x100 --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:0 0 0 -100px"> 
      <!-- margin-left:(scaled img width/-2)+(inner width/2) so margin-left:((80/80 * 320 /-2)+60 = -160+60 = -100px--> 
      <img class="stretchVertical" src="viewport/galaxies.png" alt=""/> <!-- 320x80 --> 
     </div> 
    </div><br/> 
    <div class="outer"> 
     <div class="inner" style="margin:-20px 0 0 0"> 
      <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/120 * 120 = 120)/-2)+ 40 = -60 + 40 = -20px margin-left:(120/-2)+60 = 0--> 
      <img src="viewport/luke.jpg" alt=""/> <!-- 120x120 --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:-160px 0 0 -190px"> 
      <!-- margin-top:img height - 80/-2 = -160px margin-left:(img width/-2)+(inner width/2) so margin-left:(500/-2)+60 = -190px--> 
      <img src="viewport/cookie_cutter.jpg" alt=""/> <!-- 500x400 --> 
     </div> 
    </div><br/> 
    <div class="outer"> 
     <div class="inner" style="margin:-20px 0 0 0"> 
      <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/50 * 50 = 120)/-2)+ 40 = -20px --> 
      <img class="stretchHorizontal" src="viewport/vadar.gif" alt=""/> <!-- 50x50 stretchVertical or stretchHorizontal does not matter for images smaller than both inner dimensions --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:-50px 0 0 -65px"> 
      <!-- margin-top:img height - 80/-2 = -50px margin-left:(250/-2)+60=-65px --> 
      <img src="viewport/starwars.jpg" alt=""/> <!-- 250x180 --> 
     </div> 
    </div><br/> 
    <div class="outer"> 
     <div class="inner" style="margin:-50px 0 0 -30px"> 
      <!-- margin-top:img height - 80/-2 = -50px margin-left:(180/-2)+60=-30px--> 
      <img src="viewport/big_luke.jpg" alt=""/> <!-- 180x180 --> 
     </div> 
    </div> 
    <div class="outer"> 
     <div class="inner" style="margin:-200px 0 0 0"> 
      <!-- margin-top:scaled img height/-2+(inner height /2) so (120/50 * 200 = 480)/-2 = -240px + 40 = -200px--> 
      <img class="stretchHorizontal" src="viewport/bookmark.jpg" alt=""/> <!-- 50x200 --> 
     </div> 
    </div> 
</div> 

我懷疑這是完全免費的錯誤，但我希望這是一個良好的開端您的問題:-)

Answer 2

圖片會直接。將它們設置爲顯示：block以使用margin：auto或僅在div.inner元素中使用text-align：center。

對於垂直對齊，你需要設置顯示：表細胞的div.inner元素，另外垂直對齊：中間