You need to add these to the div style:
display:flex (flex isn't available in the editor, add it manually)
justify-content:center
align-items:center
Flare doesn't show flex as a block option and the justify-content and align-items come without their properties. Mine were "inherit." when I added them.
Note that Flare is going to gripe about using Flex on every build, but it is valid and it does render Divs correctly.
These divs are from the quick-links responsive div set. I applied the css to the complex selectors for quick-links, 1-5.
Without Flex:
With Flex:
There is a feature request to add Flex and the attendant options to the CSS validation.
So, the forum's IMG tag decided it didn't like my image links.
https://i.postimg.cc/BnJTm7XX/withFlex.png
https://i.postimg.cc/jSvzm67v/without-Flex.png
Vertically and Horizontally Centering Div Content
-
- Propellus Maximus
- Posts: 613
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Vertically and Horizontally Centering Div Content
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Re: Vertically and Horizontally Centering Div Content
Yeah, flex is a really good and easy way to display content - Flare uses it in its skins.
This is a handy visual guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Usually you'd use set flex CSS properties in on both the container (display:flex), and also on the stuff inside the container (flex: x x x) to control how it's displayed.
This is a handy visual guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Usually you'd use set flex CSS properties in on both the container (display:flex), and also on the stuff inside the container (flex: x x x) to control how it's displayed.