Have you ever been deep in the CSS and wanted to have an element (paragraph, divs, etc.) aligned vertically? I have. Maybe you haven’t, but my front end folks are nodding their heads and making sad developer noises. Maybe you already knew or you have a hack for this, but it’s still great news. All of the major browsers, this year, have implemented the CSS “align-content” property! That’s right, your junk will now display centered vertically if you should choose to try one last time. Here’s the code:
<div style=”height: 700px;”>
<p style=”align-content: centered;”>Hallelujah</p>
</div>
Horizontally aligning has always been a hurdle I’ve learned to jump a long time ago. Bootstrap makes it even easier with the container-row-col system. But centered vertically elements, honestly, I’ve just committed to the stack of, “oh well’s” and moved along without considering it much. To me it’s an easily overlooked item, but I think it’s a massive plus.
And it’s supported by the following browsers:
Source: caniuse.com
Pretty wild, right? I’m excited. Ok, the excitement has left. Thank you James Smith for the heads up on this feature. Now the question (seriously) is, “Will I remember it when I need to?” Well, it’s important to pass along. I like doing that. Offering information should anyone even ask for it is, to me, important. I walked into Publix and an older man was walking his dog and I started to walk the other way. When you see a service dog, it’s natural to avoid as to not distract him/her but the man said “Oh, no – he doesn’t bite. He’s a good little guy.” And that was enough for me I immediately came over and “made a friend” as most dogs and I get along like old friends separated at the pirogi fest in 2005 and reunited to enjoy something we can’t explain. The older man then explained the dog is for his diabetes and I immediately thought “Oh, let’s share something he didn’t ask for.”
So, I told him about breakfast pitas that are sold in the freezer section which have below 15 carbs. He thanked me (honestly) so I showed him exactly where the pitas were in the freezer section and he actually seemed interested and thanked me. Not always the reception I get when sharing. But I feel really awesome when I get that reaction or when I can share something educationally and somebody “gets it.”
I’m hoping this helps a few – it doesn’t have to be many.
Also, if you missed it last week, I launched Altimeter – a free WordPress theme. Check it out – my approach is primarily disabling Gutenberg. The examples have a few bootstrap elements and a top video background. This is an advanced (and extremely niche) WordPress tool and I don’t recommend if you like using page layout systems versus code.
