From 6e782ed42d90a54e8d548cee66be3627b0a1d077 Mon Sep 17 00:00:00 2001
From: Nikita Rushmanov <Nikita240@users.noreply.github.com>
Date: Fri, 23 Jan 2015 03:16:07 -0800
Subject: [PATCH] Add a warning in images.html about text-align
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!
---
docs/_includes/css/images.html | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html
index 73516afbae..9ce88698e0 100644
--- a/docs/_includes/css/images.html
+++ b/docs/_includes/css/images.html
@@ -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>
--
GitLab