Bootstrap - Centering Content, Then Left Aligning (in relation to center)
<p>I have two divs that must be centered using the Bootstrap class <code>text-center</code> (for mobile reasons). After applying this class, the image and text center perfectly. However, I'd like the text to be centered AND left-aligned so that it is precisely in line with the left side of the image.</p>

<p>I've tried a couple of things: first centering the div and then creating a div around the text, and left-aligning the text with <code>text-left</code>. However, the text does not stay centered and moves all the way left of the column. I'd like it to only go as left as the image. If I set a margin with pixels so that the text is left-aligned with the image, then it does not stay responsive and jumps all over the page when it is resized. </p>

<p>Here is an example of the content centered, and an example of what happens when I center it and then left-align the text:
<a href="https://jsfiddle.net/wgr165tL/3/" rel="noreferrer">https://jsfiddle.net/wgr165tL/3/</a></p>

<p>I'd like to find out how to get the text centered but left-aligned only as far as the left of the image. It is necessary to keep the <code>text-center</code> class. Any input would be greatly appreciated. </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;

&lt;!-- Optional theme --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;

&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Example 1 (Original)&lt;/h1&gt;
(want text to align with the left edge of the box)
&lt;div class="row text-center"&gt;
  &lt;div class="col-sm-1"&gt;
  &lt;/div&gt;

  &lt;div class="col-sm-3"&gt;
    &lt;div&gt;&lt;img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"&gt;&lt;/div&gt;
    Test Test
  &lt;/div&gt;
  &lt;div class="col-sm-3"&gt;
    &lt;div&gt;&lt;img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"&gt;&lt;/div&gt;
    Test Test
  &lt;/div&gt;
&lt;/div&gt;

&lt;h1&gt;Example 2&lt;/h1&gt;
(Tried centering and then left-aligning text, but it goes too far left. Ideally it will line up with the left edge of the box)
&lt;div class="row text-center"&gt;
  &lt;div class="col-sm-1"&gt;
  &lt;/div&gt;

&lt;div class="col-sm-3"&gt;
    &lt;div&gt;&lt;img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"&gt;&lt;/div&gt;
    &lt;div class="text-left"&gt;Test Test&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-3"&gt;
    &lt;div&gt;&lt;img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"&gt;&lt;/div&gt;
    &lt;div class="text-left"&gt;Test Test&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>