对齐标题垂直中心图像的左侧

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 属性将"图形"与中心对齐，因为它被指定为'Center'。

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

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