使用URL居中图像

时间：2016-05-27 16:07:45

标签： html css twitter-bootstrap

我使用bootstrap的中心块类来居中图像。

<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 个答案:

答案 0 :(得分：2)

你必须为你的图像添加一个容器，并链接到除了一个section标签之外。这样，您就不必修改容器类，而是根据需要引入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>

答案 1 :(得分：1)

尝试在<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>

示例

enter image description here 

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

答案 2 :(得分：1)

链接是一个内联元素，所以只需在容器上使用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

答案 3 :(得分：0)

如果您指的是链接，就像悬停在.container的任何部分上将激活链接，而不仅仅是图像，这是解决方案：

.container {
    text-align: center;
}

.container a {
    display: inline-block;
}

这基本上为链接提供了自己的维度，因此它不会拉伸以填充父级。

相关问题
最新问题