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

Question

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

533 Views Asked by lahfordie At 02 April 2025 at 05:54

I recently started an intro web dev course on Udacity. They're covering a basic grid framework right now, and the whole project is easy except I've been working for hours on aligning captions correctly under their images. The goal is to imitate the portfolio page mock-up in the imgur link here (https://i.stack.imgur.com/pZATh.jpg).

Now, what I'm trying to do, mostly for the sake of learning to do it, is:

distribute/justify the images and captions under "Featured Works" across the whole width of the grid; left-aligned for left image and right-aligned for right image
use one grid column for each image-and-caption (I can easily make my page resemble the mock-up by dispensing with the grid and simply using flexbox with justify-content: space between, but there SHOULD be a way to do this WITH the grid, I think.)
center captions (h3 and p) relative to the IMAGE, not relative to the grid column. This makes a difference on the leftmost and rightmost columns.

The last one is what's been giving me trouble. I've finally said screw it, I'll ask people much smarter than me to solve what's probably a really simple problem. I've tried several different solutions from posts here and on other forums, and none have worked. A couple of things I've tried are (display: table) + (display: table-caption), and (figure) + (figcaption), both of those with a few different style rules.

Is there a clean way to center text under images regardless of the image's position within the container? Or do I need to create containers with explicit sizes for each image, within the columns, and position the text within each container?

Again, flexbox allowed me to replicate the mock-up, but for the sake of learning I'd like to be able to do this within the grid.

EDIT: I forgot to include code snippets. They're rough because I've been trying a bunch of different things.

* {
 -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>

Original Q&A

There are 1 best solutions below

**Serlite** · Accepted Answer

Your current CSS is really quite close to achieving what you want. The only problem left is that the <figure> around each of your images has display:block - which means it will expand to the full width of its container (the enclosing column elements).

This is a problem because your parent columns are always resizing once the browser is wide enough, while your images are statically-sized. As you've noted, this means your caption text will no longer be centered under your image after a certain browser width.

To address this, consider changing your styling for <figure> to:

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

This way, your <figure> elements will only expand as wide as they need to based on their contents, rather than always expand to the full width of the enclosing column, so the caption text will no longer be centered relative to the resizing column. Here's a JSFiddle to demonstrate.

Hope this helps! Let me know if you have any questions.

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

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CENTER

Trending Questions

Popular # Hahtags

Popular Questions