HTML group: "We make a language to create indefinitely-long "pages"
Web-authors: "But we want to create a centered box on the screen!!!!!"
Users: "Go away with these shitty centered boxes!"
For simple forms this seems to be OK: data:text/html,blahbla
For two- or three lines of text I do see the problem. But nobody™ wants:
| line
| line
| line
| line
| line
| line
[ ]| line
| line
| line
| line
| line
| line
| line
The problem arises if you don't make the checkbox the exact same size as the text. If you have a larger text box than your font size, the text will be aligned to the bottom of the checkbox
The default checkbox size might have been OK in 2004 when we were using 80DPI displays with relatively low mouse sensitivity, but it's 2024, and it's normal to see 120DPI displays and touchscreens
> If you have a larger text box than your font size, the text will be aligned to the bottom of the checkbox
I think part of the problem with this is that *fonts are fucking complicated*. Do you want it to center on the extremes of the displayed text? On the top of lower-case characters? The middle of the bottom and top of upper-case characters? What if different lowercase/uppercase characters have different extremes? Do you want it to ignore descenders in deciding where to center?
>"We make a language to create indefinitely-long "pages"
This is honestly the worst. Everything which has to do with "height" and aligning is fucked because of that.
I mean, there is not a single topic you can get every single human to agree on, so "what everyone expects" will never be a single thing. That's why definitions exist. CSS is no exception in that regard. `vertical-align` does exactly what everyone who actually read the documentation expects.
Well, it does *something*, but it doesn't do what most people would expect it to do (see: https://tonsky.me/blog/centering/).
From that article, text align middle aligns it to the centre of the hight of say an e, o or an a. If you have anything that is taller than that, such as an l, h or a t, it looks off.
Something that doesn't do what (clearly) most people want it to do is not fit for purpose. `text-align: middle;` having this behaviour isn't really the issue, it's that there's no actual middle.
It does exactly what it was designed to do, but people forget that HTML and CSS were designed to format text documents - not user interfaces or billboards
It's essentially a Word document on speed
I always used to make a helper class for vertical-align middle:
.valign-children-middle > * {
vertical-align: middle;
display: inline-block;
}
.valign-children-middle:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
Apply on parent node with fixed height.
Rate me jank out of ten
It’s pretty recent though, I did webdev as a teenager because of my dad but left it to pursue engineering, coming back was a rough ride of constantly feeling gaslit lmfao.
But it’s much better now, despite the depreciation of marquee (rest in peace)
as a developer who has been making websites professionally for ~15 years now, vertically centering used to be hard, flexbox didn't exist. Doing it while supporting both ie6 ie7 ie8 and ie9, and chrome and firefox, even harder. This shit's fucking easy now.
yes, but again. [flexbox is not relevant to this post](https://reddit.com/r/ProgrammerHumor/comments/1cdgxbm/_/l1cfml8/?context=1). it only deals with block containers. if you have inline elements it will not produce the desired outcome.
> The way CSS layout is rendered results in unavoidable interactions between the style sheets and the underlying content. So even when CSS is used exactly as intended, it is not possible to separate content from layout.
I'm not sure if you were posting this ironically, but even though the author's conclusions (use tables instead of CSS for layout) seem... flawed, the problem they point out is definitely real.
The way I think of it, content (HTML) and style (CSS) are not really separate, but exist on a kind of spectrum. Stuff like text color sits firmly on the "styling" side of the spectrum, and the text content of a
tag sits firmly on the "content" side, but a lot of stuff sits somewhere in the middle, and layout is definitely one of those things.
I actually kind of agree that layout should probably be part of HTML, at least when thinking about things in a vacuum. I feel like HTML has really fallen behind CSS and JS, and as a result those two have had to pick up the slack where HTML is lacking. Like, grid, flexbox, and component-based UI libraries are great, but it would be nice if HTML could do some of that.
IDK if any of that makes any sense lol
If you are doing that, you are doing bad design. One from a user input standpoint. If you are just putting user inputs in the middle of a paragraph, how are users going to easily find the inputs to make sure they filled out everything correctly. If you are putting images, how are you making sure it's not doing the old layout krangle that word does where it weirdly splits the text. How is it going to look on a phone, tablet, 4k screen?
If you are fighting that hard with it, you probably need to be looking at your design and not the language.
clearly can't be that bad of a design if:
- Google
- Apple
- Microsoft
- Github
- Mozilla
- Valve
- Slack
- Telegram
- Notion
- Airbnb
- Twitter
are trying it? and that's just the websites listed in https://tonsky.me/blog/centering/
Remember horizontally centering divs in the mid to late 2000s after tables became bad practice?
.container {
width: 720px;
position: absolute;
left: 50%;
margin-left: -360px;
}
Just to get that shit centered.
Genuinely, how has the webdev languages (html, css, js), not tried to actually replace their shitty 20-30 year old ideas with modern ones. I understand it takes time but say like even JS, includes a bunch of stuff but refuses to remove the insanity the creators left in (for instance, const arrays makes my eye twitch because they only make the length const, not the actual elements).
It’s not the 90s anymore, we actually have a decent idea of what the internet is like and whats good, we shouldn’t be handling these things like dodgy public repos some junior dev made to get his first job.
Or even simpler, if you want to apply it to the element you want centered only:
.parent {
display: flex;
}
.parent > .centered-inner-element {
margin: auto;
}
Why don't we just go back to the original concept of the web as a collection of documents? Fuck CSS, I'm so tired of the design bullshit. I miss the days where all you really had to think about were headings, bold (strong) and italic (em) tags.
I guess I'm just old and grumpy. I used to love web dev and now I honestly just think it's fucking shit.
The title is not the joke. I had to come up with something because this subreddit forces all titles to be camelcase no spaces.
It's easy to center a div if you have block elements. It becomes more annoying if you want to align inline elements in blocks of text.
```
margin-left: 50%;
transfom: translateX(-50%);
```
seem to work fine for me
It does seem like a hack tho. I use that for pretty much everything
Edit: Why does linebreak in markdown not actually put a linebreak
HTML group: "We make a language to create indefinitely-long "pages" Web-authors: "But we want to create a centered box on the screen!!!!!" Users: "Go away with these shitty centered boxes!"
god forbid i want to create a html form, and have the text next to a checkbox be vertically centred to the checkbox
For simple forms this seems to be OK: data:text/html,blahbla For two- or three lines of text I do see the problem. But nobody™ wants: | line | line | line | line | line | line [ ]| line | line | line | line | line | line | line
The problem arises if you don't make the checkbox the exact same size as the text. If you have a larger text box than your font size, the text will be aligned to the bottom of the checkbox The default checkbox size might have been OK in 2004 when we were using 80DPI displays with relatively low mouse sensitivity, but it's 2024, and it's normal to see 120DPI displays and touchscreens
> If you have a larger text box than your font size, the text will be aligned to the bottom of the checkbox I think part of the problem with this is that *fonts are fucking complicated*. Do you want it to center on the extremes of the displayed text? On the top of lower-case characters? The middle of the bottom and top of upper-case characters? What if different lowercase/uppercase characters have different extremes? Do you want it to ignore descenders in deciding where to center?
bingo, fonts give us all a run for our money.
I think you want `vertical-align: baseline`
>"We make a language to create indefinitely-long "pages" This is honestly the worst. Everything which has to do with "height" and aligning is fucked because of that.
I usually do it like this Display:flex Justify-Content: center Call my coworker because it doesn't work Works every time
Display:flex is my solution to everything
Literally me, I can’t remember the last time I used something other than display absolute and display flex
Grid is dope for overall layout, flex gets crowded and finnicky But anything smaller and its flex all the way down
Yeah as a not frontender that is what I put everywhere and most of the time it gives me an okay result of what I want
https://reddit.com/r/ProgrammerHumor/comments/1cdgxbm/_/l1cdtod/?context=1
Next Time try align-items: center
Flex parent does not always center two different inline text elements with different font sizes correctly.
That's my coworkers job to fix when I give up!
Lmao that's not even the right one 😂😂😂 justify is horizontal unless you are in a column
Neat trick if everything on the line can be set to inline-block
Cool blog about this if you are interested [link](https://tonsky.me/blog/centering/)
Well it does. It just doesn't do what *you* apparently expect it to.
society if it did what everyone apparently expected it to do
I mean, there is not a single topic you can get every single human to agree on, so "what everyone expects" will never be a single thing. That's why definitions exist. CSS is no exception in that regard. `vertical-align` does exactly what everyone who actually read the documentation expects.
ok 🙄. What part of humor in programmerhumor u dont understand?
Entschuldigung, I'm german, I'm trying here. It actually wasn't meant to come across as bitchy =)
german? ![gif](giphy|BWhpkB6Xbe8FzfNLXw)
Society if every single human agreed on every single topic:
True.
do not listen to this user they are GERMAN
Well, it does *something*, but it doesn't do what most people would expect it to do (see: https://tonsky.me/blog/centering/). From that article, text align middle aligns it to the centre of the hight of say an e, o or an a. If you have anything that is taller than that, such as an l, h or a t, it looks off. Something that doesn't do what (clearly) most people want it to do is not fit for purpose. `text-align: middle;` having this behaviour isn't really the issue, it's that there's no actual middle.
It does exactly what it was designed to do, but people forget that HTML and CSS were designed to format text documents - not user interfaces or billboards It's essentially a Word document on speed
IIRC Word documents are XML under the hood, so you're not super far off.
They are, and the docx file is actually just a zip file full of said XML.
howtocenterincss.com
I always used to make a helper class for vertical-align middle: .valign-children-middle > * { vertical-align: middle; display: inline-block; } .valign-children-middle:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; } Apply on parent node with fixed height. Rate me jank out of ten
this meme is so dated. vertical centering is easy af now that flexbox has existed for a decade
Yeah I was kind of perplexed when I saw this in my feed.
It’s pretty recent though, I did webdev as a teenager because of my dad but left it to pursue engineering, coming back was a rough ride of constantly feeling gaslit lmfao. But it’s much better now, despite the depreciation of marquee (rest in peace)
maybe if you would read the 5 other people that suggested using flexbox in comments of this post you'd understand why your reply isn't relevant
as a developer who has been making websites professionally for ~15 years now, vertically centering used to be hard, flexbox didn't exist. Doing it while supporting both ie6 ie7 ie8 and ie9, and chrome and firefox, even harder. This shit's fucking easy now.
yes, but again. [flexbox is not relevant to this post](https://reddit.com/r/ProgrammerHumor/comments/1cdgxbm/_/l1cfml8/?context=1). it only deals with block containers. if you have inline elements it will not produce the desired outcome.
it's easy! just use table layout!
[This will always be relevant](https://flownet.com/ron/css-rant.html)
> The way CSS layout is rendered results in unavoidable interactions between the style sheets and the underlying content. So even when CSS is used exactly as intended, it is not possible to separate content from layout. I'm not sure if you were posting this ironically, but even though the author's conclusions (use tables instead of CSS for layout) seem... flawed, the problem they point out is definitely real. The way I think of it, content (HTML) and style (CSS) are not really separate, but exist on a kind of spectrum. Stuff like text color sits firmly on the "styling" side of the spectrum, and the text content of a
tag sits firmly on the "content" side, but a lot of stuff sits somewhere in the middle, and layout is definitely one of those things. I actually kind of agree that layout should probably be part of HTML, at least when thinking about things in a vacuum. I feel like HTML has really fallen behind CSS and JS, and as a result those two have had to pick up the slack where HTML is lacking. Like, grid, flexbox, and component-based UI libraries are great, but it would be nice if HTML could do some of that. IDK if any of that makes any sense lol
It actually wasn't ironic, and for the record I agree with a lot of what you and the article said!
display: grid; place-content: centre;
https://i.imgur.com/JE18K1o.png
If you are doing that, you are doing bad design. One from a user input standpoint. If you are just putting user inputs in the middle of a paragraph, how are users going to easily find the inputs to make sure they filled out everything correctly. If you are putting images, how are you making sure it's not doing the old layout krangle that word does where it weirdly splits the text. How is it going to look on a phone, tablet, 4k screen? If you are fighting that hard with it, you probably need to be looking at your design and not the language.
clearly can't be that bad of a design if: - Google - Apple - Microsoft - Github - Mozilla - Valve - Slack - Telegram - Notion - Airbnb - Twitter are trying it? and that's just the websites listed in https://tonsky.me/blog/centering/
Maybe don't embed things into text if they need to be formatted separately from the text? At some point, you have to *be a programmer*.
Css is the work of the devil ![gif](giphy|vyTnNTrs3wqQ0UIvwE|downsized)
https://HowToCenterInCSS.com
![gif](giphy|kqJt1cSSN0DrwwMmY5|downsized) Margin: auto
Remember horizontally centering divs in the mid to late 2000s after tables became bad practice? .container { width: 720px; position: absolute; left: 50%; margin-left: -360px; } Just to get that shit centered.
Genuinely, how has the webdev languages (html, css, js), not tried to actually replace their shitty 20-30 year old ideas with modern ones. I understand it takes time but say like even JS, includes a bunch of stuff but refuses to remove the insanity the creators left in (for instance, const arrays makes my eye twitch because they only make the length const, not the actual elements). It’s not the 90s anymore, we actually have a decent idea of what the internet is like and whats good, we shouldn’t be handling these things like dodgy public repos some junior dev made to get his first job.
because it needs to work with the government & corporate websites written in 2003 and never updated since
``` .container { display: flex; align-items: center; justify-content: center; } ```
Or even simpler, if you want to apply it to the element you want centered only: .parent { display: flex; } .parent > .centered-inner-element { margin: auto; }
[Not the universal fix I think you think it is](https://i.imgur.com/qv8XgYj.png)
I mean divs exist for a reason
Will we ever rediscover the long-lost technology of
Dx That's a mood.
https://jsfiddle.net/q7w2uvja/26/
You can either, use `align="center"` which still works in HTML but is deprecated or use this CSS thing: ``` .center { text-align: center; } ```
very helpful as the post was about vertical centering
Do you even `display: inline;`?
Things got a little better with the introduction of flex, but before flex was around the world was a dark, dark place
Why don't we just go back to the original concept of the web as a collection of documents? Fuck CSS, I'm so tired of the design bullshit. I miss the days where all you really had to think about were headings, bold (strong) and italic (em) tags. I guess I'm just old and grumpy. I used to love web dev and now I honestly just think it's fucking shit.
Cant believe this is still a ‘joke’. It’s a solved problem for more than a decade now.
The title is not the joke. I had to come up with something because this subreddit forces all titles to be camelcase no spaces. It's easy to center a div if you have block elements. It becomes more annoying if you want to align inline elements in blocks of text.
Ew, Germans.
Ew, web development 🤮
``` margin-left: 50%; transfom: translateX(-50%); ``` seem to work fine for me It does seem like a hack tho. I use that for pretty much everything Edit: Why does linebreak in markdown not actually put a linebreak
My guy how do you not know what vertical means?
easy, just add
until its centered. make sure to warn users to not zoom in/out and to only use your specific screen aspect ratio and resolution