在<a>標籤

中心放置的圖像中有150x130標籤：在<a>標籤

.listings ul li a.thumb{ 
    float:left; 
    width:150px; 
    height:130px; 
    border:#ededed 3px solid; 
}

當我保存圖像我查看圖像的寬度和高度。與== 150或高度== 130。並鑑於：

<a href="#" class="thumb"> 
     if (checking with is full) 
     { 
     <img src="@Url.Content(Path.Combine("~/Uploads/Products/", @item.ImagePath))" style = "width: 150px;" alt="" /> 
     } 
    if (checking height is full) 
     { 
     <img src="@Url.Content(Path.Combine("~/Uploads/Products/", @item.ImagePath))" style = "height: 130px;" alt="" /> 
     } 
    </a>

有在不同尺寸此<a>標籤圖像。例如，100x130,70x130,150x140,150x80等。但其中一種尺寸的圖像等於標籤尺寸之一。（150或130）。方形圖像不是問題，但不同大小的圖像似乎在<a>標籤的底部或頂部，右側或左側。

如何才能放置所有尺寸圖片中心的標籤？

來源

2012-09-08 Jhoon Bey

可能的複製http://stackoverflow.com/questions/720495/vertical-align-block-level -lele-block-level-element –

首先，您需要將<a>轉換爲帶有display:block的塊元素。

其次，我會設置你的縮略圖作爲背景圖像，而不是和使用background-position: center center這將CENTE RIT垂直和水平

<a href="#" class="thumb" 
    style="background-image: url('@Url.Content(Path.Combine("~/Uploads/Products/", @item.ImagePath))')">&nbsp;</a>

來源

2012-09-08 20:49:13 tgormtx

'background-repeat：no-repeat' too –

這也是必需的。良好的捕捉 – tgormtx

這個工程，因爲我想要的。但..圖像放大很多。似乎並不完整，似乎只是形象的中心。 –

也許添加display: block;既a和img，然後添加margin: 0px auto;您img。

來源

2012-09-08 20:47:21

裏有標記HTML 4.01和HTML5之間的差異。佈局屬性：align，border，hspace和vspace分別代表在HTML 4.01中，HTML5不支持！你要包裝你的標籤在另外一個，讓你的CSS做對齊這樣爲例：的

<!DOCTYPE html> 
<html> 
<body> 
    <article style="text-align:center"> 
    <img src="img/test.png" alt="test" /> 
    </article> 
</body> 
</html>

來源

2012-09-08 21:11:56

回答

相關問題