I have a feeling I’m not doing this correctly. I just want the text to be centered then place an icon above it. What is the correct way to do this? Mines is broken.
I think grids may help you:
1 Like
The text is centred horizontally in each section but do you mean vertically?
There is no vertical space as such because you have 190px padding on top of the words.
I’m not quite clear on the desired result but if you mean vertically then you would need to have some height on the quadrant in which you could centre the text. If you want an icon and then text directly underneath you would just put the icon in a div above your text html within the same quadrant and assuming you align:center on the flex rule they would both center vertically together.
I may have misunderstood though 
1 Like
I thought so too but now i have to learn a whole new layout system for one thing? I wanted to see if there was something less taxing lol.
Did you mean something like this?
2 Likes
Yes!!! I just wanted the text to be close to the horizontal border/ vertical spacing between icon and text. To do this, I would just put another span around the text and add margins right??
CSS’s grid feature, or…maybe the table element will also do it? 
Yes you can align the text to the bottom by using margin-top:auto and just give the icon a margin-bottom.
Auto margins will push the element as far one way as it can when in the right flex context.
I’ve forked the codepen and made the top two boxes sit on the bottom and the bottom two boxes sit on the top do they all meet in the middle.
I’m not sure what exact design you want but this shows how to move things around.
Hope it helps
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.