CSS - <img>標籤的寬度小於圖像文件的寬度。可能在中間對齊？

Question

正如標題所暗示的那樣，我試圖將圖像的源居中放置在它的圖像標籤中。圖片kinda 必須的寬度爲212px，img標籤的寬度爲210px。

因此，不是從右側丟失兩個1px柱，是否有可能從左側丟失1個，從右側丟失1個？

在此先感謝。

編輯：我的形象被壓縮，因爲它似乎，不裁剪，這是更糟:)

Answer 1

你可以通過CSS添加邊框：

img { 
    border: 1px solid white; /* or same colour as your site's background */ 
} 

或可選擇地把一個包含元素圍繞圖像，例如

<div class="img"><img src .. /></div> 

.img { 
    text-align: center; 
    width: 212px; 
} 

Answer 2

我會建議將圖像標記包裹在div中。然後，您可以設置div來有212px寬然後設置圖像標籤有：

margin: 0 auto; 

這行告訴圖像對圖像的頂部和底部0保證金，併爲汽車參數左邊距和右邊距強制瀏覽器將元素居中放置在其包含的元素中，在本例中爲div包裝。

Answer 3

做到這一點，最好的方法是包含一個div內的圖像：

<div id="image_container"> 
<img id="img" src="/whatever.jpg"/> 
</div> 

CSS：

#image_contrainer{ 
width:212px; 
text-align: center; 
} 

#img{ 
width:auto; 
margin:auto; 
} 

這可能不準確，但其正確的想法做這樣的東西。只是玩耍，直到它的工作。