• hperrin@lemmy.caEnglish
    37·
    3 days ago

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

    • The_Decryptor@aussie.zoneEnglish
      2·
      23 hours ago
      <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.caEnglish
        3·
        20 hours ago
        • 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.zoneEnglish
          2·
          19 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·
      3 days ago

      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
        151·
        3 days ago

        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·
          3 days ago

          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·
            3 days ago

            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.

          • onlinepersona@programming.dev
            8·
            3 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.

        • YoSoySnekBoi@kbin.earth
          8·
          2 days ago

          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