rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Add a warning in images.html about text-align

Browse Source 
People normally center images using text-align. However, the `.img-responsive`
class changes the display type to block. As a result you can no longer align the 
image with text-align. You must instead do it with margin: auto. There was no 
note about this on the web page, and no mention about setting the display to
block. Users were left on a frustrating journey to figure out why they can't center
images anymore!
This commit is contained in:
Nikita Rushmanov 2015-01-23 03:16:07 -08:00
parent d41f114e9b
commit 6e782ed42d
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_includes/css/images.html
View File

@ -2,7 +2,11 @@
<h1 id="images" class="page-header">Images</h1>
<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> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
<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>
<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>