Question

以下不是选项

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

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

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

Answer 1

首先，您可能会看到，您有两个具有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

Answer 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

Answer 3

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

<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

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

3 个答案: