3 ms·
How about a simple, single, CSS property that can simply say: "horizontally center this text inside its rectangular element" And another one for: "vertically
by Aardwolf 7y ago
How about a simple, single, CSS property that can simply say:
"horizontally center this text inside its rectangular element"
And another one for:
"vertically center this text inside its rectangular element"
The issue of centering wrapped multiline text has been solved in many UI libraries.
- joekrill 7y agoWell there is one for the first: `text-align: center;`. But things can quickly get very complicated. This all needs to be done in the context of a ton of other CSS rules that could alter layout. And by the way, what do you mean by "vertically centered"? Using the font's baseline? Text top? Bottom? How are we dealing with text overflow if there isn't enough room in your rectangular element?
- butz 7y agodisplay: flex; justify-content: center; align-items: center;
- silverwind 7y agoThose will clip child content when they overflow. There is a fix, but only supported by Firefox currently: justify-content: safe center; align-items: safe center;
- Izkata 7y agoI mean, if we're going for multiple attributes anyway, this has worked since long before flexbox: On the parent: position: relative; On the element to be centered: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);