align-content in block layout
source link: https://rachelandrew.co.uk/archives/2023/12/19/align-content-in-block-layout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
align-content in block layout
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.
#css
Leave a Reply Cancel reply
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)
© 2023 Rachel Andrew
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK