Since there are so many ways of horizontally centering DIVs I thought I’d list my favorite ones and in which cases they’re applicable.
The obvious: text-align
In simple cases we all love this solution, setting
text-align: center on the containing element. The problem is that
text-align only works on
inline elements, as in
divs that have their position set to
inline-block. When you have this situation, this is the way to go.
div you want to center has a fixed width set, you can use the magical that is automatic margins. Just set
margin: 0 auto which tells the browser to set automatic margins horizontally on the element, thus centering it in its parent.
The when-push-comes-to-shove way
Then there’s the case where the width is dynamic, and your elements are inline elements. In those cases I like the surefire way which I call “Dave Centering” (after the friend that taught me this).
This surefire solution works, but comes at a cost of adding some non-semantic elements. But being pragmatic, sometimes you gotta align those things.
Here’s the final product, and below is the explanation of the details:
1 2 3 4 5
1 2 3 4 5 6 7 8 9 10 11 12 13
We first set the parent’s position to
relative so that positioning
center-wrapper will be relative to it.
center-wrapper is set to start right at the center of
parent, which is close but no cigar. We want its center to be the same as the center of the
parent, which is why for the final and inner element we set it to be offset relatively to the left by exactly half (50%) of its width.
I hope this saves you some time next time you’re knee deep in the DOM.
“Maintaining AngularJS feels like Cobol 🤷…”
You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?
It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.
Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.