Align Caption Left of Vertically Centered Image

Question

In the following example, is there an easy way to align the caption with the left edge of the centered image?

Currently the display looks like this:

      ____________________
     |                    |
     |                    |
     |                    |
     |                    |
     |____________________|
 This is my caption

I'd like it to look like this

  ____________________
 |                    |
 |                    |
 |                    |
 |                    |
 |____________________|
 This is my caption

 .container{ width: 100%; height:200px; } img{ width: 400px; height:50px } .figure{ text-align: center; } .caption{ text-align: left; } 

 <div class="container"> <figure class="figure"> <img src=""/> <figcaption class="caption"> This is my caption. </figcaption> </figure> 

Answer 1

You could do it like this.

 .container{ width: 100%; height:200px; } #imgWrap { display: inline-block; } img{ width: 400px; height:50px } .figure{ text-align: center; } .caption{ text-align: left; } 

 <div class="container"> <figure class="figure"> <div id='imgWrap'> <img src=""/> <figcaption class="caption"> This is my caption. </figcaption> </div> </figure> </div> 

Answer 2

The text-align property aligns the "figure" to the center as it is specified as 'center'.

So change it to 'left' or don't specify it at all.

 .container{ width: 100%; height:200px; } img{ width: 400px; height:50px } .figure{ } .caption{ } 

 <div class="container"> <figure class="figure"> <img src=""/> <figcaption class="caption"> This is my caption. </figcaption> </figure>