中心对齐响应图像的左对齐标题 [英] Left aligned caption for center aligned responsive image

问题描述

我无法使其与Bootstrap 3一起使用。

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.

有任何想法吗？

推荐答案

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

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>

这篇关于中心对齐响应图像的左对齐标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！