将标题垂直居中对齐

Question

在下面的示例中，是否有一种简单的方法将标题与居中图像的左边缘对齐？

当前显示如下：

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

我希望它看起来像这样

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

您可以这样做。

 .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

text-align属性将“数字”与中心对齐，因为它被指定为“中心”。

因此，将其更改为“左”或根本不指定它。

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