将图像放置在 <a> 标签的中心答案

【问题标题】：Placing an image in the center of <a> tag将图像放置在 <a> 标签的中心
【发布时间】：2012-09-09 05:11:56
【问题描述】：

150x130中有一个标签：

.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> 标签的底部或顶部、右侧或左侧。

如何将所有尺寸的图片居中放置到标签中？

【问题讨论】：

stackoverflow.com/questions/720495/…的可能重复

标签： image css hyperlink centering

【解决方案1】：

首先，您需要将<a> 转换为带有display:block 的块元素。

其次，我会将您的缩略图设置为背景图像，并使用background-position: center center 垂直和水平居中

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

【讨论】：

background-repeat: no-repeat也
这也是必需的。好收获
这行得通，如我所愿。但是..图像放大很多。似乎没有满，似乎只是图像的中心。
这应该是“缩放”图像。如果要增加图片来填充，那么可以使用CSS3属性background-size: 150px 130px;

【解决方案2】：

也许将display: block; 添加到a 和img，然后将margin: 0px auto; 添加到您的img。

【讨论】：

【解决方案3】：

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>

【讨论】：