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

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>

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

Left aligned caption for center aligned responsive image

html

css

alignment

twitter-bootstrap