this post was submitted on 22 Dec 2025
280 points (96.1% liked)

Programmer Humor

28016 readers
1693 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
280
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
56 comments fedilink hide all child comments
 

comiCSS

you are viewing a single comment's thread
view the rest of the comments
[–] The_Decryptor@aussie.zone 2 points 1 day 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 21 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 20 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.