左对齐标题用于中心对齐的响应图像

Question

I can't make it work with Bootstrap 3.

I have a center aligned responsive image like this:

<img class="img-responsive center-block" src="">

and I want to add caption, which will be left aligned under the image.

Any ideas?

Answer 1

This one was a lot trickier than i thought.. So the first thing to do was wrap the image in a span, which would control the size of the width of the caption. From here it got complicated because having the wrap maintain the width of the image is easy but you lose the ability to keep it centered and responsive...

https://jsfiddle.net/mk7on98L/19/

      <span class="text-center center-block" style="max-width:100%">
    <span data-caption="Some sample text. Some sample text." class="img-wrapper text-left">
      <img class="img-responsive" src="http://placehold.it/350x150">
    </span>
  </span>