中心对齐的响应图像第2部分的左对齐标题

@ partypete25和其他人可能会帮助！中心对齐的响应图像第2部分的左对齐标题

感谢：

Left aligned caption for center aligned responsive image

和

它为我工作的！不过，我似乎无法在图像下方显示多行文字。我试图使用BR并添加更多的文本行，但是出错了。对每行文本末尾有BR的多行文本有何建议？谢谢！

我试图用这样的：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <span class="text-center center-block" style="max-width:100%"> 
     <span data-caption="line 1 of text <br> line 2 of text <br> line 3 of text" class="img-wrapper text-left"> 
      <img class="img-responsive" src="http://placehold.it/350x150"> 
     </span> 
     </span> 
    </div> 
    </div> 
</div>

问候，

来源

2015-05-14 exe

@ partypete25请注明宽度！ =） – exe

我认为你做这两个硬盘上的自己。只需将图像中的标题分开即可。

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <span style="width:100%; margin:0 auto;"> 
      <img class="img-responsive" src="http://placehold.it/350x150"> 
     </span> 
     <span class="caption">line 1 of text <br> line 2 of text <br> line 3 of text</span> 
    </div> 
    </div> 
</div>

来源

2015-05-14 11:29:17 charles

谢谢！然而该图像不再被居中并在所有=（亚历Macra-我们确实有分配宽度在移动观点，即不工作这里是CSS： .IMG-包装{ 显示：内联块; 最大-width：100％; } .IMG-包装：后{ 含量：ATTR（数据字幕）; 文本对齐：左; 显示：-inline块; } – exe

@exe，立即尝试。添加'margin：0 auto'应该使它自动放置，不管中心标签在做什么 – charles

谢谢。我添加了边距，但照片仍然是“左对齐”。这个概念显然是将照片居中，然后有左下方的文字与照片居中对齐。我试图附上一个屏幕截图，但我不认为我能够在这里=（ – exe

多行，你就需要在.IMG，包装

来源

2015-05-14 11:43:31

我们确实已经分配了宽度，下面是css： .img-wrapper {display：inline-block; max- width：100％;} .img-wrapper：after {content：attr（data-caption）; text-align：left; display：-inline-block;} – exe

而不是100％尝试固定宽度 –

中心对齐的响应图像第2部分的左对齐标题

回答

相关问题