左對齊標題用於中心對齊的響應圖像

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>