9713


bootstrapを使っている状態で中央寄せされたレスポンシブな画像をリンク化しようとしたのですが、うまくいきません。

下記のようなコードを書きました。

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
            rel="stylesheet">
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          
          <a href="http://ja.stackoverflow.com">
            <img class="center-block img-responsive"
                 src="http://cdn.sstatic.net/ja/img/apple-touch-icon.png">
          </a>
          
        </div>
      </div>
    </div>
    </body>
    </html>
[/code]

上記を実行すると分かる通り、画像の左右スペースにまで余計にリンクが及んでしまうのですが、画像にだけリンクさせるにはどうすると良いでしょうか？


CC BY-SA 3.0
2015-04-30T12:20:54.087
9698
2015-04-30T16:03:56.893
3922
question
html css bootstrap
bootstrap下の中央寄せされたレスポンシブ画像のリンク化


親`<div>`に`text-align:center`、`<img>`に`display:inline-
block;`が付くように`CSS`を設定すると良さそうです。

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
            rel="stylesheet">
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12" style="text-align:center">
        <!-- もしくは、div class="col-md-12 text-center" -->
          <a href="http://ja.stackoverflow.com">
            <img class="center-block img-responsive" style="display:inline-block;"
                 src="http://cdn.sstatic.net/ja/img/apple-touch-icon.png">
          </a>
        </div>
      </div>
    </div>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2015-04-30T16:03:56.893
9713
2015-04-30T16:03:56.893
46
9698
answer