Question

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>标记的底部或顶部，右侧或左侧。

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

Answer 1

可能会向display: block;和a添加img，然后将margin: 0px auto;添加到img。

Answer 2

首先，您需要将<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>

Answer 3

标记中的HTML 4.01和HTML5之间存在差异。 HTML 4.01中的布局属性：align，border，hspace和vspace 已弃用，HTML5不支持！你必须将你的标签包装在另一个标签中，并使你的CSS像这个例子那样对齐：

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

将图片放在<a> tag</a>的中心

3 个答案: