Dexstrum Dexstrum - 6 months ago 12
HTML Question

Centering images with URL

I am centering an image using bootstrap's center-block class.

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


The only problem is that the links spans the width of the container. How do I restrict the URL to the image?

Working JSFIDDLE

Answer

Try wrapping another element around your <a> and <img> tags and explicitly centering it via text-align: center; or Bootstrap's text-center class :

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

Example

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>

Comments