SVG dominant-baseline Property
dominant-baseline determines which part of a text element aligns to its specified y-coordinate, affecting vertical text positioning.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How dominant-baseline Affects Text Positioning
By default, SVG text's y-coordinate refers to its alphabetic baseline (roughly where letters without descenders sit), and dominant-baseline lets you change that reference point to other options like middle (vertically centering the text) or hanging (aligning from the top), which matters for precisely centering text vertically within a shape like a button or badge.
- Default y-coordinate reference is the alphabetic baseline where most letters sit
- dominant-baseline: middle vertically centers text relative to its y-coordinate
- Matters for precisely centering text within a shape like a button or badge
Common dominant-baseline Values and Their Uses
The middle value is by far the most commonly used for vertically centering a label within an icon, button, or data visualization element, while hanging suits text meant to align from its top edge, and central offers a similar but subtly different centering calculation useful for certain precise alignment needs across different font metrics.
- middle is the most commonly used value for vertically centering labels
- hanging aligns text from its top edge rather than the standard baseline
- central offers a subtly different centering calculation for precise cross-font alignment
Frequently Asked Questions
Why does my text still look slightly off-center even with dominant-baseline: middle?
Different fonts have slightly different internal metrics, so middle centering can look marginally different across font choices — fine-tuning with a small manual y-offset adjustment alongside dominant-baseline often achieves pixel-perfect centering for a specific font.
Is dominant-baseline supported consistently across all major browsers?
Support is generally solid across current major browsers, though historically there were more inconsistencies, so testing the specific value and font combination across your target browsers remains a reasonable precaution.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG