I am having trouble center-aligning these Collection’s on the collection list. Anything that is more than 1 line centers, but anything less than 1 line still aligns to the left. Any fix for this? Using Meka theme.
Topic summary
A user encountered an alignment issue with collection titles in the Meka theme where multi-line titles centered correctly, but single-line titles remained left-aligned.
Attempted Solutions:
- Initial CSS fixes targeting
.collection-list-item .collection-titlewith flexbox properties and minimum height constraints were suggested but did not resolve the issue. - Alternative approach using fixed height and line-height to force two-line formatting also failed.
Working Solution:
Adding the following CSS to the base.css file successfully centered all collection titles:
.collection-card-wrapper .card__information {
display: flex;
justify-content: center;
}
Status: Resolved. The correct CSS selector targeting .collection-card-wrapper .card__information fixed the alignment inconsistency.
Hello there
Please share your store URL and Password( If enabled ) then I will check your website issue.
Regards
Titu
Hello @emcati
This issue occurs because text that spans multiple lines is naturally centered, while single-line text remains left-aligned due to how the CSS text-align and flexbox/grid layouts are handling it.
Fix: Center Align All Collection Titles
You can force all collection titles to be center-aligned by modifying the CSS in your Meka theme.
Solution 1: CSS Fix
Try adding this to your theme’s custom CSS (in theme.css or base.css):
.collection-list-item .collection-title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 3em; /* Adjust based on title height */
}
Explanation:
display: flex; justify-content: center; align-items: center; → Ensures the text is always centered.
text-align: center; → Centers the text within its container.
min-height: 3em; → Ensures consistent height so shorter text gets centered properly.
Solution 2: Force All Titles to Be Two Lines
Another approach is to set a fixed height and line height to force all collection titles into a two-line format:
.collection-title {
height: 3.5em; /* Adjust height as needed */
line-height: 1.5em;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
white-space: normal;
}
This ensures that even short one-line titles will still behave like a multi-line title.
Thank you 
Thank you for your response! Neither one of those ended up working. I pasted both at the bottom of my assets/base.css file and tested both individually. No luck.
You can use that CSS in your asset file
.collection-card-wrapper .card__information {
display: flex;
justify-content: center;
}
I’m assuming the base.css file?
Yes, you can
That worked! Thank you!
1 Like
Okay Great