对齐垂直居中图像的标题左边
问题描述：
在下面的示例中，是否有一种简便的方法将标题与居中图像的左边缘对齐？对齐垂直居中图像的标题左边
目前显示的信息如下：
____________________
| |
| |
| |
| |
|____________________|
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>
答
你可以不喜欢这样。
.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>
答
的文本对齐，因为它被指定为 '中心'属性对齐 “的数字” 到中心。
因此，将其改为“左”或根本不指定它。
.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>+0
对不起，我想保持图像中心对齐。 –
如果你想让它左对齐，为什么'.figure'居中对齐？ – RobertAKARobin
我想让图像与父容器的中心对齐，但是它下面的标题要与居中图像的左边缘对齐。 –