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
It seems to be centered for me, unless I misunderstand what you mean.
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
It’s a relatively small thing, but this is what I mean.
Ah that would be why it seemed fine to me, I’m viewing it on a reduced size browser window.
Ah indeed. What a strange thing.
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!
Wow, I must have forgotten to put in the right positioning. Thank you so much for taking the time to figure this out!