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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment