How to align text under picture?

Question

I want to align text under picture like this:

right

Before I had it like this, which is wrong:

wrong

My code:

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

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

In localhost it somehow only aligns the first line to the image. How do I align all of text?

My first suggestion would be to wrap your text in `
` tags, before attempting to style the paragraph. — Frits, Jun 22 '16 at 07:42

score 2 · Accepted Answer · answered Jun 22 '16 at 07:43

Give your span a flex display and provide it with a width.

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

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

https://jsfiddle.net/vzjj9eLy/

score 0 · Answer 2 · answered Jun 22 '16 at 07:42

I am not 100% sure that the following is what you want, but what about setting the width of the wrapping span to be the same with the image?

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

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

score 0 · Answer 3 · answered Jun 22 '16 at 07:44

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

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

How to align text under picture?

3 Answers3