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和标题来获取图像的宽度。我已经尝试了所有内容，将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

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

评论后的补充：

好的，然后擦除容器上的宽度并将标题的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

Answer 2

您希望文字与图片的宽度相同吗？你有。你不需要任何表格或表格标题。

此处，img和.caption的全宽度为.promo-box。

＆＃13;

.promo-box {
  border: 1px solid red;
  width: 50%;
}
.promo-box img {
  width: 100%;
  height: auto;
  margin-bottom: 3px;
}
.promo-box .caption {
  margin: 0;
}

＆＃13;

<div class="large-4 columns">
  <div class="promo-box">
    <a href="#">
      <img src="http://dummyimage.com/400x250">
      <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>

＆＃13;

CSS - 图片标题对齐不起作用

2 个答案: