水平に配置された画像の左にキャプションを配置

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

プロパティをテキスト整列それは '中心' として指定されているように、中心に "数字" を整列させます。

「left」に変更するか、まったく指定しないでください。

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