diff options
| author | Kevin Kirsche <[email protected]> | 2015-02-09 10:09:44 -0500 |
|---|---|---|
| committer | Kevin Kirsche <[email protected]> | 2015-02-09 13:55:37 -0500 |
| commit | 894ec6f71419a0a7028e49a655623934f03ba24c (patch) | |
| tree | 6caa6c203d92b31a14480767bd40374e405da917 /docs | |
| parent | 3efa9c46a40e49109e7a14d58ee7f8b170a3d17b (diff) | |
| download | bootstrap-894ec6f71419a0a7028e49a655623934f03ba24c.tar.xz bootstrap-894ec6f71419a0a7028e49a655623934f03ba24c.zip | |
Fixes #15653 — Add comment which explains that how a responsive image should be centered
Fixes #15653 — Add comment which explains that how a responsive image should be centered
Redo of #15657 which I couldn't get to rebase properly after all the merges were done last night.
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/css/images.html | 5 |
1 files changed, 1 insertions, 4 deletions
diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html index 9ce88698e..a79a4d920 100644 --- a/docs/_includes/css/images.html +++ b/docs/_includes/css/images.html @@ -3,10 +3,7 @@ <h2 id="images-responsive">Responsive images</h2> <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p> - <div class="bs-callout bs-callout-warning" id="callout-images-text-align"> - <h4>Center aligning images</h4> - <p>Since <code>.img-responsive</code> changes the display type to <code>display: block;</code>, you can no longer align the image using text-align or any of the <a href="#type-alignment">alignment classes</a>. Instead, use <a href="#helper-classes-center"><code>.center-block</code></a> on the image element itself.</p> - </div> + <p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="../css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p> <div class="bs-callout bs-callout-warning" id="callout-images-ie-svg"> <h4>SVG images and IE 8-10</h4> <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p> |