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

Question

我无法使用Bootstrap 3。

我有一个像这样的中心对齐的响应式图像：

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

我想添加标题，它将在图像下保持对齐。

任何想法？

Answer 1

这个比我想象的要复杂得多。所以要做的第一件事是将图像包裹在一个跨度中，这将控制标题宽度的大小。从这里开始变得复杂，因为包裹保持图像的宽度很容易，但你失去了保持中心和响应的能力......

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>