在响应式网站（使用引导程序）中，如何将包含图像的锚标记居中答案

【问题标题】：In a responsive website (using bootstrap), how to center an anchor tag containing an image在响应式网站（使用引导程序）中，如何将包含图像的锚标记居中
【发布时间】：2016-07-23 04:02:08
【问题描述】：

以下不是选项

<div class="container">    
<a href="/Home">
<img class="img-responsive center-block" src="/home_logo.png" alt="Home"/>
</a>
</div>

因为现在可以点击整行（容器），而不仅仅是 home_logo.png

是否有任何优雅的方式（可能是引导程序类）只使图像可点击（以及使图像具有响应性）。

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

在 Bootstrap 5 中，您可以在 flexbox 容器上使用 align-items 实用程序来更改 flex 项目在交叉轴上的对齐方式（y 轴开始，x 轴如果 flex-direction：列）。

<div class="d-flex align-items-center">
  <a href="/some"><img src="/images/jack.jpg"></a>
</div>

查看文档链接 - https://getbootstrap.com/docs/5.0/utilities/flex/#align-items

【讨论】：

【解决方案2】：

试试这个

<div class="container text-center">
  <a href="/Home" class="inline_block">
    <img class="img-responsive center-block" src="http://icons.iconarchive.com/icons/janosch500/tropical-waters-folders/512/Burn-icon.png" alt="Home">
  </a>
</div>

working fiddle

【讨论】：

【解决方案3】：

首先，您可能会看到，您有两个具有display: block 行为的元素（类.container、center-block 和img-responsive 具有display: block 属性）和一个具有display: inline 行为的元素（标签的<a> 默认行为）。您需要将display: inline 更改为display: inline-block。居中嵌套元素的简单解决方案是向父元素（在这种情况下为div.container）再添加一个 Bootstrap 的类.text-center。 .center-block 类是多余的，你可以删除它。

<div class="container text-center">
  <a class="inline_block" href="/Home">
    <img class="img-responsive" src="/home_logo.png" alt="Home">
  </a>
</div>

.inline_block {
  display: inline-block;
}

JSFiddle-example

【讨论】：

问题是图像不再响应（当您使 a 标签内联块时）。因此，当您减小/增加网站大小时，它不会自动调整大小。我想你可以使用媒体查询......但是使用 img-responsive 类会失败！你有没有其他使用媒体查询的方法？
@Sha Par，你是什么意思？为什么现在图像没有响应？我已将更大的图像放入以前的代码中并创建了新示例：jsfiddle-example