html - CSS - 图像标题对齐不起作用

Question

我有一个如下所示的 html:

                <div class="large-4 columns">
                    <div class="promo-box">
                        <a href="#">
                          <img src="/our-projects-sfk.png">
                          <div class="caption">
                            <h5><Våre prosjekter</h5>
                            <p>Hver sommer i 20 år har vi gledet familier som har et kreftrammet barn med tre-dagers drømmetur til Kristiansand Dyrepark.</p>
                          </div>
                        </a>
                    </div>
                </div>

由于事先不知道图片的宽度，所以不能给div设置固定的宽度，需要div和caption来取图片的宽度。我已经尝试了所有方法，将 promo-box 设置为 display: inline-block 并将其设置为 display: table 并使用 figure 和 figcaption 标签，但没有任何效果。不确定如何将 caption 设置为图像的宽度？

这是我的尝试:

.promo-box {
  display: table;
}

.promo-box img {
  width: 100%;
  height: auto;
  vertical-align: top;
  margin-bottom: 3px;
}

.promo-box .caption {
  display: table-caption;
  caption-side: bottom;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
}

最终结果是这样的:

Answer 1

如果您的 .promo-box 是一个表格，您应该将图像和标题容器制作成表格行，并将 text-align: center 分配给标题容器。

添加:

请参阅此代码笔:http://codepen.io/anon/pen/zNyQGQ

我还向容器添加了一个固定的 with - 否则图像将始终与标题文本一样宽。

评论后添加:

好的，然后删除容器上的宽度并将标题的 CSS 更改为:

.promo-box .caption {
  display: table-caption; /* changed */
  width: 100%; /* changed */
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  text-align: center;
}

查看新代码笔:http://codepen.io/anon/pen/LxMwBK