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

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

你可以这样做。

＆＃13;

＆＃13;

.container{
  width: 100%;
  height:200px;
}

#imgWrap
{
  display: inline-block;
}
img{
  width: 400px;
  height:50px
}

.figure{
  text-align: center;
}

.caption{
  text-align: left;
}

＆＃13;

<div class="container">
    <figure class="figure">
        <div id='imgWrap'>
            <img src=""/>
            <figcaption class="caption">
                This is my caption.
            </figcaption>
        </div>
    </figure>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

text-align 属性对齐＆＃34;数字＆＃34;到中心，因为它被指定为＆＃39; center＆＃39;。

所以将其改为＆＃39; left＆＃39;或者根本不指明。

＆＃13;

＆＃13;

.container{
  width: 100%;
  height:200px;
}

img{
  width: 400px;
  height:50px
}

.figure{
  
}

.caption{
  
}

＆＃13;

<div class="container">
<figure class="figure">
<img src=""/>
<figcaption class="caption">
This is my caption.
</figcaption>
</figure>

＆＃13;

＆＃13;

＆＃13;