KPC
Kevin Powell - Community•12mo ago
Matt

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
Kashimoto•12mo ago
i think padding / margin: auto; is a way to do it. i just use flex instead
croganm
croganm•12mo 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 😂
Matt
Matt•12mo ago
I usually use flex as well, just figured I would ask to see if there were flexless solutions 🙂
croganm
croganm•12mo 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
croganm•12mo ago
This may provide some unique solutions!
Want results from more Discord servers?
Add your server
More Posts
hosting a website on a virtual machine, or other alternativesi want to know how to host a website on a private VM or if there are some good other alternativesReact pros - is this worth getting?Friend's company pays for whatever he needs to study, he uses React now but wants to learn a bit morFeedback my code for https://github.com/callum-laing/Portfolio por favor.Admittedly I haven't touched this in awhile; The last thing I did was remove some unfinished businesyour opinion. phone layoutI am trying to design a phone version of a website, but can't decide how to do it. the images is hwhy else statement runs even if the if statement being true?Guys, why the else statement runs even if the if statement is true ```js // file manager in node js how to render diff elements at once in vanila jsi have this api data what i want to have 7 diff p tags and every p tags should have maxtemp_c value UI implementationI need any ideas on how I can implement the content on the picture attachedrerender is adding fetch results again and again.issue occurs at setWatchListData. im trying to insert unique objects by comparing the ids. whenever Vertically stacked sticky headersI am trying to replicate Twitter's layout. I have a header menu bar, a side navbar that translates Express with tailwindcss IssueI am using tailwindcss for the express project , I have done the required steps - created tailwind.c