Kevin Powell - Community•2y ago

Vertically Align Text

Hello! I'm trying to vertically align an H1's content. I have tried vertical-align: middle;. A work-around was to display:flex then align-items:center. What's another way to do this without flex?

.heading {
    text-align: center;
    min-height: 100px;
    margin: 0;
}

.heading {
    text-align: center;
    min-height: 100px;
    margin: 0;
}

5 Replies

Kashimoto•2y ago

i think padding / margin: auto; is a way to do it. i just use flex instead

croganm•2y ago

Flex is usually the go to but margins work as well, and as does absolute positioning. This is basically the age old question of how to center a div 😂

MattOP•2y ago

I usually use flex as well, just figured I would ask to see if there were flexless solutions 🙂

croganm•2y ago

https://youtu.be/87YMCtsBoCM

Kevin Powell

YouTube

Best (and worst!) ways to center WITHOUT flex or grid

People like to make fun of how hard it is to center things with CSS, and while we have flex and grid which make it super duper easy these days. Sometimes when someone complains about it, then gets a reply of "it's easy with flexbox", they reply "but what if you can't use flexbox or grid?". It's a dumb reply, but it did get me thinking a little. ...

croganm•2y ago

This may provide some unique solutions!

Gaming

Programming

Vertically Align Text