Make captions center align (after adding captions on hover css)

Site URL: https://kknomics.squarespace.com/deltakere

I've created a simple grid gallery and added CSS so that the captions would appear on hover. The captions are nicely centered when only using one line, but when a line breaks they're aligned to the left. How do I make the text remain centered?

This is the CSS I've used 🙂

.gallery-caption {

position: absolute;

top: 0;

left: 0;

background: rgba(232,78,27,0.6); /* overlay color */

height: 100%;

max-width: unset;

padding: 0;

opacity: 0;

pointer-events: none;

}

 

.gallery-caption-wrapper {

display: flex;

align-items: center; /* center vertically */

justify-content: center; /* center horizontally */

}

.gallery-caption-content {

font-size: 1.6rem !important; /* caption font size */

font-weight: 600 !important;

color: white; /*caption font color */

}

.gallery-grid-item {

position: relative;

}

.gallery-grid-item:hover .gallery-caption {

opacity: 1;

}

.gallery-caption-grid-simple {

transition-delay: 0ms;

}

Edited April 30, 2022 by Muntzer

Added this and now it works 🤓

text-align-last: center;