Muntzer Posted April 30, 2022 Share Posted April 30, 2022 (edited) 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 Link to comment
Muntzer Posted May 1, 2022 Author Share Posted May 1, 2022 Added this and now it works 🤓 text-align-last: center; tuanphan 1 Link to comment
sequoyahimages Posted May 14 Share Posted May 14 On 5/1/2022 at 3:38 AM, Muntzer said: Added this and now it works 🤓 text-align-last: center; Hi! Where in the original code did you add this piece code to make it work? Link to comment
tuanphan Posted May 14 Share Posted May 14 57 minutes ago, sequoyahimages said: Hi! Where in the original code did you add this piece code to make it work? Add to this so it should be Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment