用URL对图像进行定心
用URL对图像进行定心
提问于 2016-05-27 16:07:44
我正在使用引导程序的中间块类来对一个图像。
<section class="container">
<a href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>唯一的问题是链接跨越容器的宽度。如何将URL限制在图像上？
工作JSFIDDLE
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-05-27 16:13:24
尝试将另一个元素封装在<a>和<img>标记周围，并通过text-align: center;或Bootstrap的text-center类显式地将其对齐：
<section class="container">
<!-- You can use Bootstrap's text-center class a style="text-align: center;" here -->
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>示例
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Centered Apple Logo</title>
</head>
<body>
<section class="container">
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;" />
</a>
</div>
</section>
</body>
</html>
Stack Overflow用户
发布于 2016-05-27 16:18:37
您必须添加一个容器，为您的图像和链接，以坐在里面，除了一个区段标签。这样，您就不必修改容器类，并引入一个div来根据您的意愿组织和样式。以下是工作代码：
<section class="container">
<div style="width:150px;margin-left:auto;margin-right:auto;">
<a class="center-block"href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>Stack Overflow用户
发布于 2016-05-27 16:19:45
链接是一个内联元素，所以只需在容器上使用text-center。
<section class="container text-center">
<a href="//www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>http://codeply.com/go/bLOmNY1pQZ
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37488004
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号