Center Captions Over Gallery Images

[braddalton]

Hi

I tried the CSS from this post on css-tricks but can’t get it to work with gallery captions.

I’m using the native WordPress gallery for 3 columns.

Here’s what i’ve tried:

.gallery .gallery-item img {
    position: relative;
}

.gallery img {
    position: relative;
}

.gallery-caption {
    position: absolute;
    background-position: center center;
}

.wp-caption-text {
    position: absolute;
    background-position: center center;
}

Thanks for any help.

[Beverleyh]

The background-position property relates to images/gradients so will not centre text.

The most obvious way to centre text is to use the text-align property (with ‘center’ value), although it’s success depends on markup, and other stuff going on in the CSS.

To offer specific help, we would need a reduced demo in something like CodePen. Or you can try further techniques from this article https://css-tricks.com/centering-css-complete-guide/

[braddalton]

Thanks. More interested in working out how to float the caption over the image before i work out how to center it.

[Paulie_D]

Without seeing this in a demo it’s hard to help but I think I can see one point.

The container of the image and caption should be position:relative not the image.

Something like this:

http://codepen.io/Paulie-D/pen/KNdMqM

[Author]

Posts