Better Icon and Label Alignment
2 days ago
- Problem: Centering an icon with text using align-items:center looks odd when text wraps; using align-items:start aligns icon to top of container.
- Solution for HTML icon: Use align-items:start and translateY offset calculated with (1lh - icon-size)/2 using the CSS lh unit.
- Solution for pseudo-element icon: Use flexbox with height:auto, aspect-ratio:1, background-size:contain, and the same offset calculation.
- Key CSS properties used: flexbox, lh unit, calc(), aspect-ratio, height:auto, and flex-shrink:0.
- Offset dynamically adapts to changes in font size, icon size, and container width.