将标题垂直居中对齐

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>