將標題垂直居中對齊

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>