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

Programmer Humor

28058 readers
813 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
283
Centering a Div (i.ibb.co)
submitted 6 days ago* (last edited 6 days ago) by King@sh.itjust.works to c/programmer_humor@programming.dev
61 comments fedilink hide all child comments
 

comiCSS

you are viewing a single comment's thread
view the rest of the comments
[–] hperrin@lemmy.ca 36 points 6 days ago (13 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 4 days 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 4 days 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 4 days 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.

load more comments (11 replies)