Bulma is-vcentered Vertical Alignment Issues

Inconsistent Vertical Alignment in is-vcentered Columns

0 reputation · 29 Mar 2026, 21:34 UTC

98.4K views0

The Bulma CSS framework utilizes a Flexbox-based grid system where the is-vcentered modifier is applied to the columns container to align child columns vertically.

When columns contain elements of varying heights or dynamic content, the resulting vertical centering behavior can differ across browser engines, potentially leading to layout shifts or misalignment of baseline text.

Given that Bulma is a CSS-only framework, there is no built-in JavaScript to normalize these rendering differences across environments.

How does is-vcentered handle vertical alignment when child columns have significantly different internal content heights?
Are there documented CSS overrides to ensure consistent vertical centering across all modern browser engines?

4,332 following

Keep exploring this topic

Bulma `hero is-fullheight` renders inconsistent mobile height; viewport units or content overflow suspected

A Bulma full-viewport hero can look too tall or too short on mobile, but the root cause may be dynamic viewport units, hero-body padding, or content overflow rather than the hero class itself.

Flexbox stretch vs CSS Grid auto rows for equal-height responsive card columns

Trade-off between Flexbox stretch and CSS Grid auto rows for equal-height responsive card columns, with focus on alignment control and an unresolved intrinsic sizing interaction with nested grids.

Sass Variable Overrides vs CSS Custom Properties for Bulma Runtime Theming

Bulma v1 exposes two customization layers with an undocumented boundary. Deciding between Sass variable overrides and CSS custom properties for runtime theming raises unresolved questions about drift and compile-time limits.

Bulma navbar dropdown with is-hoverable does not open on touch devices

A Bulma navbar dropdown using the is-hoverable modifier opens on desktop hover but fails to open when tapped on touch devices, raising questions about the CSS-only interaction model and supported alternatives.

Inconsistent Vertical Alignment in is-vcentered Columns

0 answers

Your perspective belongs here.

0 question comments