在网格列内，无论图像位置如何，相对于图像的中心标题

Question

我最近在 Udacity 上开设了介绍性网络开发课程。他们现在涵盖了一个基本的网格框架，整个项目很简单，除了我已经工作了几个小时才能在他们的图像下正确对齐标题。目标是模仿 imgur link 中的作品集页面 mock-up here (http://imgur.com/CIQWlBi).

现在，我正在尝试做的，主要是为了学习如何做，是：

distribute/justify "Featured Works" 下方的图片和说明横跨整个网格宽度；左图 left-aligned 右图 right-aligned
为每个 image-and-caption 使用一个网格列（我可以轻松地使我的页面类似于 mock-up，方法是放弃网格并简单地使用带有 justify-content 的 flexbox：space 之间，但我认为应该有一种方法可以用网格来做到这一点。）
中心字幕（h3 和 p）相对于图像，而不是相对于网格列。这使得最左边和最右边的列有所不同。

最后一个一直给我带来麻烦。我终于说去他的，我会请比我聪明得多的人来解决可能非常简单的问题。我已经从这里和其他论坛的帖子中尝试了几种不同的解决方案，并且 none 已经奏效。我尝试过的几件事是 (display: table) + (display: table-caption), and (figure) + (figcaption), 两者都有一些不同的样式规则。

无论图像在容器中的位置如何，是否有一种干净的方法可以使文本在图像下方居中？或者我是否需要在列中为每个图像创建具有明确大小的容器，并将文本放置在每个容器中？

同样，flexbox 允许我复制 mock-up，但为了学习，我希望能够在网格中执行此操作。

编辑：我忘记包含代码片段。它们很粗糙，因为我一直在尝试很多不同的东西。

* {
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

/* -- see how boxes line up
* {
 border: 1px solid red !important;
} */

.grid {
 margin: 0 auto;
 min-width: 960px;
    max-width: 1360px; /* caption text centered (relative to image and grid column) at 960px, but I want to see it centered at any width */
}

.row {
 width: 100%;
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}

.col-1 {
 width: 8.33%;
}

.col-2 {
 width: 16.66%;
}

.col-3 {
 width: 25%;
}

.col-4 {
 width: 33.33%;
}

.col-5 {
 width: 41.66%;
}

.col-6 {
 width: 49.99%;
}

.col-7 {
 width: 58.33%;
}

.col-8 {
 width: 66.66%;
}

.col-9 {
 width: 75%;
}

.col-10 {
 width: 83.33%;
}

.col-11 {
 width: 91.66%;
}

.col-12 {
 width: 100%;
}

.left {
 text-align: left;
}

.center {
 text-align: center;
}

.right {
 text-align: right;
}

figure {
 display: block;
 margin: 0px;
}

figure figcaption {
 text-align: center;
}

#header {
 border-bottom: 3px solid #BCBBBB;
 margin-bottom: 30px;
 padding-bottom: 15px;
}

#nameheader {
 text-align: right;
}

#subname {
 margin-bottom: 0px;
}

<body>
 <div class="grid">
  <div class="row" id="header">
   <div class="col-6">
    <img src="http://placehold.it/100x100" alt="placeholder">
   </div>
   <div class="col-6" id="nameheader">
    <h1>JANE DOETTE</h1>
    <p id="subname">FRONT-END NINJA</p>
   </div>
  </div>

  <div class="row">
   <div class="col-12">
    <img src="http://placehold.it/960x350" alt="placeholder">
   </div>
  </div>

  <div class="row">
   <div class="col-12">
    <h2>&nbsp;Featured Work</h2>
   </div>
  </div>
  <div class="row">
   <div class="col-4">
    <figure class="left">
     <img src="http://placehold.it/300x200" alt="placeholder" class="left">
     <figcaption>
      <h3>APPIFY</h3>
      <p>http://url.com</p>
     </figcaption>
    </figure>
   </div>
   <div class="col-4">
    <figure class="center">
     <img src="http://placehold.it/300x200" alt="placeholder" class="center">
     <figcaption>
      <h3>SUNFLOWER</h3>
      <p>http://url.com</p>
     </figcaption>
    </figure>
   </div>
   <div class="col-4">
    <figure class="right">
     <img src="http://placehold.it/300x200" alt="placeholder" class="right">
     <figcaption>
      <h3>BOKEH</h3>
      <p>http://url.com</p>
     </figcaption>
    </figure>
   </div>
 </div>
</body>

Answer 1

您目前的 CSS 确实非常接近实现您的目标。剩下的唯一问题是每个图像周围的 <figure> 都有 display:block - 这意味着它将扩展到其容器的整个宽度（封闭的列元素）。

这是一个问题，因为一旦浏览器足够宽，您的 parent 列总是会调整大小，而您的图像 statically-sized。正如您所指出的，这意味着您的标题文本在一定的浏览器宽度后将不再位于图像下方的中央。

要解决此问题，请考虑将 <figure> 的样式更改为：

figure {
    display: inline-block;
    margin: 0px;
}

这样，您的 <figure> 元素将只会根据其内容展开到它们需要的宽度，而不是总是展开到封闭列的整个宽度，因此标题文本将不再是相对于调整大小列居中。这是 JSFiddle to demonstrate.

希望对您有所帮助！如果您有任何问题，请告诉我。

在网格列内，无论图像位置如何，相对于图像的中心标题

Center caption relative to image regardless of image position, within grid column

html

css

center