Position images inside the gallery element in center

Please advise, how to position images inside the gallery element in the center.

The following CSS is applied to the region to make it full width:

.upfront-region-container-bg,
.upfront-region-center,
.upfront-grid-layout {
  width: 100%;
}

If only image gallery is added inside the image can't be positioned with simple CSS rules. Left value added for each image div.

Please advise,

Kind regards

  • Katya Tsihotska

    Hello, luca sgariglia

    Hope you're fine today.

    Unfortunately, there is no ability to centered images in gallery element by using theme options.

    You can try to use the following CSS code:

    .ugallery {
        text-align: center;
        font-size: 0;
    }
    .ugallery .ugallery_item {
        float: none;
        left: auto !important;
        top: auto !important;
        position: relative !important;
        display: inline-block;
        margin-right: 10px !important;
        margin-left: 10px !important;
        margin-bottom: 20px;
    }

    Just go to you Upfront editor, open the gallery element settings, Appearance section and press "Edit Preset CSS". Paste this code there.

    But note, if you'll use it, some features will not working anymore, eg the animation when the gallery has loaded, and images bounce from left to right. And one more, if you'll use this code spacing between images will setup with CSS, the settings in Upfront editor will not apply.

    Normally I wouldn't suggest the use of the !important declaration. However, it can sometimes be a necessary evil when over-writing existing styles. You can find more info on the use of important declaration here:
    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

    If you have any additional questions please let me know and I’ll be happy to help.

    Best regards
    Katya

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.