如何对齐图片下的文字？

Question

我想将照片下的文字对齐如下：

在我这样做之前，这是错误的：

我的代码：

＆＃13;

＆＃13;

.test{
  display:inline-block;
}
.test img{
  display:block;
}

＆＃13;

<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

＆＃13;

＆＃13;

＆＃13;

在localhost中，它仅以某种方式将第一行与图像对齐。如何对齐所有文本？

Answer 1

为span展示柔性显示屏，并为其提供宽度。

＆＃13;

＆＃13;

.test {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.test img {
  display:block;
}

＆＃13;

<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/vzjj9eLy/

Answer 2

我不是100％确定以下是您想要的，但是如何将包裹span的宽度设置为与图像相同？

＆＃13;

＆＃13;

.test{
  display:inline-block;
  max-width: 316px;
}
.test img{
  display:block;
}

＆＃13;

<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

.test{
  display:inline-block;
  width:200px;
  text-align: justify;
}
.test img{
  display:block;
  width:200px;
}

＆＃13;

<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" height="200">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

＆＃13;

＆＃13;

＆＃13;