This content originally appeared on Rachel Andrew and was authored by rachelandrew
Despite what you might read in some corners of the internet, it’s been possible to vertically centre an element inside a parent for a very long time now. The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout. While the property was specified to work in block layout, no browser had implemented it, until now.
Chrome 122 implements align-content for block containers, and it’s being implemented in WebKit too. If you view the following CodePen in Chrome 122 (Canary at the time of writing) you’ll see that the text is vertically centred—no display: flex required.
See the Pen align-content in block layout (Chrome 122) by Rachel Andrew (@rachelandrew) on CodePen.
This content originally appeared on Rachel Andrew and was authored by rachelandrew
rachelandrew | Sciencx (2023-12-19T09:22:22+00:00) align-content in block layout. Retrieved from https://www.scien.cx/2023/12/19/align-content-in-block-layout/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.