Fig caption not centered in only one item

Fig caption not centered in only one item
0

#1

Looking over a portfolio I made a few months ago, I realize I’ve never been able to find a solution for this.

In the portfolio section of the page, when hovering over an item, a caption slides up from the bottom with a black background. In the first item only, this text is not centered. I cannot figure out why that could be.

https://codepen.io/LaerTrech/pen/KzBNQE


#2

It seems to be centered for me, unless I misunderstand what you mean.


#3

From my observation the text doesn’t center when it’s only one line long, but when you shrink the page enough so that the caption spans across 2 lines it centers. Likewise if you expand it just enough the 3rd caption won’t be aligned.
Strange, looking into into it rn


#4

It’s a relatively small thing, but this is what I mean.


#5

Ah that would be why it seemed fine to me, I’m viewing it on a reduced size browser window.


#6

Ah indeed. What a strange thing.


#7

Here’s the fix:

figure.effect-portfolio h2,
figure.effect-portfolio p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* This is what I added * /
  padding: 2px;
}

What was the cause was that the caption’s <p> element wasn’t fully stretched across, like so:

The red border displays where the element is positioned. As you can see, the text was centered but not the element itself. I initally thought setting the display to block or using <div>s instead would fix it, but since it has position:absolute it seems to not allow it. So what I did was set the right positioning to 0 alongside the left, in other words be 0 pixels away from both sides. Hope this helps!


#8

Wow, I must have forgotten to put in the right positioning. Thank you so much for taking the time to figure this out! :grinning: