I used CSS to vertical align some text..

without checking Stack Overflow

CSS before Flexbox

You can vertically align in Google slides!

WHAT SORCERY IS THIS!

Just before you, my fellow system programmer, scroll past this, let me say this:

🍬 The web is actiually simple. 🍬

Both HTML and CSS is declarative. It's all easy when you understand the concepts, learn how to be idiomatic and quit trying to do that imperative bullshit in languages that aren't imperative.

HTML is simple. You know the boilerplate: doctype, head, body, that's all. Just mark it up and do NOT look at it before you end, mark it up as it were article or something. The appearance is up to css.

CSS is simple. You may even forget bem or rscss, you're already a skilled software developer. Use common sense and your code-splitting and naming skills you gained reading The Code Complete or doing software development for years.

Forget mockups. Forget absolute positioning, forget setting width and height in pixels. Go to awwwards, find some inspiration. Draw some buttons and fields on paper with your good old pencil. Then go and write some css. Feel free to steal some shadows and transitions from codepen.

Read about 8-pixel grid system. Let every element push away from others by setting something like margin: 16px; and whoops! You've just got fully responsive and got great vertical rhythm without even using media queries!

Oh my god, do NEVER set width and height explicitly! Type something like button { width: 120px; } and bang! The entire web page is broken. Quit that shit. Let it resize as it should. It will resize itself to fit its contents.

HTML is by default ready for your template engine. That's how you receive data from server — as server-side rendered, plain old HTML page. On the other hand, the form element is the most axiomatic and simple way to send the data to server. That's how you send it — as plain old GET or POST that every webserver can handle.

All of there are true:
1. It's easy to get great 100% responsiveness without media queries.
2. It's easy to align items in row, it's just one line of css. Maybe two, if you still want elements to wrap, but want to use flexbox:
.parent {
display: flex;
flex-wrap: wrap;
}
3. HTML and CSS are fast by default.
4. You don't need mockups to achieve great visual experience. Mockups is imperative, web is declarative.
5. You may not even need JavaScript to make great website.

Go on, ask me a question about web! I'll ready to answer everything.

don't even start me on vertical-align

CSS Vertical Alignment:

div {
display:flex;
align-items:center;
}

This is not a problem anymore, so can we stop pretending like it is?

HAPPINESS IS

...when the code works!

"especially when vertical align works in a way you never thought it would..."

CSS: Vertical-Align

Display:table, display: table-cell, and vertical-align: middle....

(Usually in footers)

When your word is touching the top of the div, then you take out the vertical-align: middle and it goes lower

so here's a rant/question

So I'm having an issue with vertical-metrics in a font I'm using which results in mac aligning it in the middle and windows aligning it at the bottom. I tried re-converting it for webfont (fixing vertical metrics in fontsquirrel) but not luck so far,

any ideas?

PS vertical-align don't work either

tests boy
- balding in his late twenties
- thinks that React is a framework
- favorite book is either 1984 or fight club
- came to IT to make an impact but obviously lacks determination to do so. Prefers not to think about it
- doesn’t know why and for what he wakes up every morning. Stopped thinking about it 7 years ago
- has a girlfriend that doesn’t allow him to penetrate her, only hugs and cunnilingus
- already forgot how does a blowjob feel like
- when it’s too hot in his room when he tries to sleep, he gets up and opens the window, and after that he doesn’t want to sleep anymore, and tomorrow is a yet another working day
- unexpected slack message sound he hears when not at the office triggers his fight or flight response
- still salty about CSS vertical-align: middle not instantly centering the element vertically
- just like 5 years ago, every day he thinks that after he learns That New Thing, he’ll begin The Real Life, and his current career state is temporary
- loves to say “it’s not my job” but only says that if absolutely sure that he won’t be reported for that
- uses vscode
- thinks he’s an engineer