Live data from Hacker News

CSS adds vertical centering in 2024

build-your-own.org

11–20 of 50 posts

Re: CSS adds vertical centering in 2024

#11
post #2

It's kind of funny seeing center-aligned "align-content just works!" aligned-left within the div in Firefox ESR. This is definitely a bleeding edge feature but a welcome one. It'll be some years before I chose to use it. edit: It's in the top left, not centered horizontally or vertically.

Firefox has supported this since 125. So if you are on ESR 128 it should work fine https://caniuse.com/mdn-css_properties_align-content_block_c...

[deleted]

Re: CSS adds vertical centering in 2024

#13
post #2

It's kind of funny seeing center-aligned "align-content just works!" aligned-left within the div in Firefox ESR. This is definitely a bleeding edge feature but a welcome one. It'll be some years before I chose to use it. edit: It's in the top left, not centered horizontally or vertically.

Per the article, _align_ is for vertical distribution, and _justify_ is for horizontal. The example is actually behaving correctly. The naming is confusing though, imo

Ah! Thanks for the correction. Unfortunately it's not centered vertically either. It's in the top left.

Re: CSS adds vertical centering in 2024

#14
post #2

It's kind of funny seeing center-aligned "align-content just works!" aligned-left within the div in Firefox ESR. This is definitely a bleeding edge feature but a welcome one. It'll be some years before I chose to use it. edit: It's in the top left, not centered horizontally or vertically.

Firefox has supported this since 125. So if you are on ESR 128 it should work fine https://caniuse.com/mdn-css_properties_align-content_block_c...

That is what the article claims, but... I see it as left-aligned. Firefox 129.0.1 on MacOS.

Re: CSS adds vertical centering in 2024

#17

It seems odd that "style sheets" turned into layout language. ;-)

Always has been.

From SGML, precursor to HTML:

> Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline.

https://www.w3.org/TR/WD-html40-970708/intro/sgmltut.html

Re: CSS adds vertical centering in 2024

#18
post #5

This was already a feature for flex box and grid. They’re just adding this to flow layout. Still a welcome addition but consider that all browsers that add support for this will already have support for flex and grid.

Yes, but imagine if you're new to CSS how unintuitive and annoying it is that you need to figure out what display modes mean and how they behave in order for a property like `align-content` to work as expected? That's a weird thing about css in my opinion.

Re: CSS adds vertical centering in 2024

#19
post #14

Earlier quoted context omitted.

Firefox has supported this since 125. So if you are on ESR 128 it should work fine https://caniuse.com/mdn-css_properties_align-content_block_c...

That is what the article claims, but... I see it as left-aligned. Firefox 129.0.1 on MacOS.

It should be left aligned, but it should also be vertically centered within the resizable black-bordered box.

Re: CSS adds vertical centering in 2024

#20
post #14

Earlier quoted context omitted.

Firefox has supported this since 125. So if you are on ESR 128 it should work fine https://caniuse.com/mdn-css_properties_align-content_block_c...

That is what the article claims, but... I see it as left-aligned. Firefox 129.0.1 on MacOS.

I've just looked at it in Firefox 129 and it's vertically centered.
Post reply on HN