Perfectly center an uppercase text
Are you tired of the unwanted spaces above and below your text? One line of code can fix this and you can have a perfect centering for your uppercase text.
.text {
text-box: cap alphabetic;
}Chrome-only for now
See the Pen Perfectly centered uppercase! by Temani Afif (@t_afif) on CodePen.
Another interesting one in case you have a lowercase text (without ascender or descender).
.text {
text-box: ex alphabetic;
}
See the Pen Perfectly centered lowercase! by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- Transparent inner border for images A simple code to add a fancy transparent inner border to image elements.
- Get the value of an input range (without JavaScript) Use modern features to get the value of an input range using only CSS.
- Bouncy radio buttons using modern CSS A fun CSS-only experimentation to create a jumping dot between radio inputs.
- A single-element volume control component Use modern CSS to tranform a native input element into a volume control component.