The CSS display property is essential for aligning text and icons. By choosing the right display value for the container and its children, you can achieve proper horizontal and vertical alignment.

Common Approaches

1
display: inline-flex – Allows elements to sit inline while providing flex alignment for children. Perfect for icons next to text without breaking line flow.
2
display: flex – Makes a container a flex box. Use align-items: center to vertically align text and icons.
3
display: inline-block – Lets elements flow inline while controlling vertical alignment using vertical-align.
4
display: grid – Provides a two-dimensional layout for precise horizontal and vertical alignment of text and icons.

Example: Flex Alignment

Here, the icon and text are vertically centered using inline-flex and align-items: center. The gap property adds spacing between them.

Best Practices

1
Use flex or inline-flex to align icons and text horizontally and vertically.
2
Use align-items: center to vertically center elements in a flex container.
3
Use gap for consistent spacing instead of individual margins.
4
For more complex layouts, grid can precisely align multiple icons and text elements.
5
Avoid mixing inline-block and flex in the same container to prevent misalignment.

Difficulty: 4/10

Topics: display:flex, inline-block, vertical alignment

Scenario Questions

0-2 years experience

1
You have a button with an SVG icon and a label. How would you use CSS display properties to place the icon left of the text and keep them vertically centered?
2
If you set the container to display:inline-block, what effect does that have on the alignment of an inline icon and its accompanying text?
3
What happens when you use display:table-cell for the icon and the text elements, and when would that be useful?

2-5 years experience

1
Our navigation bar mixes items with and without icons. After switching the container to display:flex, some icons appear misaligned in Chrome. How would you debug and fix the alignment?
2
The design spec says the icon must be 24 px tall and the text baseline should line up with the icon’s vertical center. Which display value and CSS properties would you choose, and why?
3
Why might using display:inline-block on the icon introduce extra whitespace, and how would you eliminate that whitespace?

5-8 years experience

1
You’re leading a redesign of a shared component library that includes buttons, inputs, and cards with icons. How would you standardize alignment across the library using display values while supporting legacy browsers and theming?
2
A performance audit shows that using display:flex on many nested components adds layout thrashing on mobile. What trade‑offs would you consider, and how might you restructure the CSS to keep alignment correct but reduce reflow?
3
When integrating a third‑party icon font, the icons appear offset from the text in some RTL locales. How would you adjust the display strategy to handle LTR/RTL and maintain pixel‑perfect alignment?

8+ years experience

1
Our monolithic app has thousands of hard‑coded tables and inline icons. What architectural approach would you take to replace those display:inline/table hacks with a consistent flex‑based alignment strategy, and how would you roll it out without breaking existing pages?
2
How would you design a CSS‑in‑JS theming solution that enforces correct icon‑text alignment across multiple product teams while still allowing custom overrides of display values?
3
If we need to support both legacy IE11 and a new React Native Web build, how would you reconcile differing display capabilities to ensure icons and text stay aligned across platforms?

Follow-up Questions

❓Can you show the exact CSS you would write for that layout?
❓What edge cases could cause the alignment to break?
❓How would you verify the solution works across different browsers and devices?