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

以下不是一个选项

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

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

---

是否有任何优雅的方法（可能是引导类）只使图像可点击（也使图像具有响应性）。

首先，您可能会看到，您有两个元素具有

显示：block

行为（类

.container

，

中心块
和
img responsive
具有
显示：块
属性）和一个具有
显示：内联
行为的元素（标签的
试试这个

<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>



在引导程序5中，您可以使用flexbox容器上的“对齐项目”实用程序来更改横轴上柔性项目的对齐方式（y轴开始，x轴如果柔性方向：列）



检查文档链接-
问题在于图像不再响应（当您创建a标记内联块时）所以当你减少或增加你的网站的大小时，它不会自动调整大小。我想你可以使用媒体查询……但是这是使用IMG响应类的失败！你有没有看到使用媒体查询的其他方法？@ SHAPAR，你是什么意思？为什么图像现在没有反应？我已经把更大的图像放到了以前的代码中，创造了新的考试。ple：
.inline_block {
  display: inline-block;
}

<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>

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