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

问题描述

我不能使它与引导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.

任何想法？

Any ideas?

推荐答案

这一次是有很多棘手的比我想象。所以要做的第一件事就是换了图像中的跨度，这将控制宽度的大小的标题。从这里变得复杂起来，因为具有包装保持图像的宽度是容易的，但你失去保持它为中心的能力和响应...

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屋！