居中对齐响应图像的左对齐标题第 2 部分答案

【问题标题】：Left aligned caption for center aligned responsive image part 2居中对齐响应图像的左对齐标题第 2 部分
【发布时间】：2015-07-25 23:51:03
【问题描述】：

@partypete25 和其他人可以提供帮助！

感谢：

Left aligned caption for center aligned responsive image

和

https://jsfiddle.net/mk7on98L/19/

它也对我有用！但是，我似乎不能在图像下方有多行文本。我尝试使用 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>

问候，

【问题讨论】：

@partypete25 请！ =)

标签： html css responsive-design

【解决方案1】：

我认为你让这两个对自己很不利。只需将标题与图像分开即可。

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

【讨论】：

谢谢！但是图像不再居中，并且在移动视图中根本不起作用=（Alex Macra-我们确实分配了宽度。这是css：.img-wrapper { display:inline-block; max-width:100%; } .img-wrapper:after { content: attr(data-caption); text-align:left; display:-inline-block; }
@exe，现在就试试吧。无论中心标签在做什么，添加margin: 0 auto 都会使其自动留出空间。
谢谢。我添加了边距，但照片仍然“左对齐”。这个概念显然是让照片居中，然后让下方的文字与照片居中对齐。我正在尝试附上屏幕截图，但我认为我不能在这里 =(

【解决方案2】：

对于多行，您需要在 .img-wrapper 上指定宽度

【讨论】：

我们确实指定了宽度。这是css： .img-wrapper { display:inline-block;最大宽度：100%； } .img-wrapper:after { 内容: attr(data-caption);文本对齐：左；显示：-inline-block； }
而不是 100% 尝试固定宽度