this post was submitted on 22 Dec 2025
276 points (96.0% liked)

Programmer Humor

28001 readers
1215 users here now

Welcome to Programmer Humor!

This is a place where you can post jokes, memes, humor, etc. related to programming!

For sharing awful code theres also Programming Horror.

Rules

founded 2 years ago
MODERATORS
Feyter@programming.dev
anzo@programming.dev
BurningTurtle@programming.dev
pylapp@programming.dev
276
Centering a Div (i.ibb.co)
submitted 2 days ago* (last edited 2 days ago) by King@sh.itjust.works to c/programmer_humor@programming.dev
53 comments fedilink hide all child comments
 

comiCSS

you are viewing a single comment's thread
view the rest of the comments
[–] hperrin@lemmy.ca 37 points 2 days ago (2 children)

Centering a div is pretty fucking easy nowadays. What’s way harder is aligning a god damned SVG icon with text.

[–] The_Decryptor@aussie.zone 2 points 13 hours ago (1 children) 
<p><svg class="icon">...</svg> Text</p>

p .icon {
    --size: 1.25em;
    vertical-align: calc(0.5cap - 0.5 * var(--size));
    height: var(--size);
    width: var(--size);
}

Done.

[–] hperrin@lemmy.ca 3 points 10 hours ago (1 children)
  • Doesn’t work with non-square icons.
  • Doesn’t align with multi-line text (text wraps to underneath icon).
  • Only aligns centered (no baseline).

But that’s pretty good for most cases.

[–] The_Decryptor@aussie.zone 2 points 9 hours ago

Ahh, yeah that's a bit harder, CSS multiline stuff is pretty flaky from what I can recall. You need to drop down to block layout, e.g. making the containing element a flex parent (Better term than that?) and then making the icon centered within that can work, but then we're back to square one with sizing the icon.

[–] YoSoySnekBoi@kbin.earth 13 points 2 days ago (2 children)

Even that is pretty easy nowadays with modern CSS:

<div> <svg /> Text </div>

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

    /* If the SVG needs an offset */
    & svg {
        --offset: ...px, ...px;
        transform: translate(var(--offset));
    }
}
[–] onlinepersona@programming.dev 14 points 2 days ago (1 children)

Yeah. Easy. So easy. Text size changes, svg not centered anymore. Add margin (or whatever that inside margin is called), and tada, not centered.

[–] funkless_eck@sh.itjust.works 16 points 2 days ago (2 children)

padding

At the risk of getting flamed - I wonder if because CSS is a design tool not a programming tool, it will seem unintuitive to people from a technical background, but more intuitive to people from a design/arts background

[–] TrickDacy@lemmy.world 10 points 2 days ago* (last edited 2 days ago) (1 children)

Exactly this ^

When we had "backend" people at my shop, they were god awful at css. It was so bad at one point that I scolded any backend person who touched css because they always fucked shit up if they did.

[–] Phunter@lemmy.zip 14 points 2 days ago (1 children)

I fuck up CSS on purpose whenever possible to reduce the likelihood of anyone letting me near it.

[–] TrickDacy@lemmy.world 7 points 2 days ago

Maybe you used to work with me? haha

[–] onlinepersona@programming.dev 8 points 2 days ago

I think you're right. CSS was more understandable to me after reading that it came from the world of print media. It's how things were laid out there and it was transformed into a language from those with domain knowledge.

But I would be curious if those who studied art also use the same terminology. If so, then it would make sense that it would seem more intuitive to them.

[–] 4am@lemmy.zip 3 points 2 days ago (1 children)

Still using div in 2025

No

[–] YoSoySnekBoi@kbin.earth 8 points 2 days ago (1 children)

I'm confused - it's the only non-semantic standard html container. Ofc it's bad if you're trying to communicate intent, but if it's just for minor layout tweaks, anything else would mess with the document structure. Find me one sufficiently complex website that doesn't use divs lol

[–] irelephant@programming.dev 2 points 1 day ago

I actually nest everything in <p>s