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

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>