kuuhana
  • Communities
  • Multi-communities
  • Support Lemmy
  • Search
  • Login
  • Sign Up
Programmer Humor@programming.devbyKing@sh.itjust.works
6 months

Centering a Div

i.ibb.co English

comiCSS

62
    You must log in or register to comment.

    • tiredofsametab@fedia.io
      6 months

      <CENTER><DIV>just as the founders intended</DIV></CENTER>

      / If your language has 58 ways to accomplish something like that, you’re in for a bad time.

      • hperrin@lemmy.caEnglish
        6 months

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

          • YoSoySnekBoi@kbin.earth
            6 months

            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
                6 months

                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
                    6 months

                    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
                        6 months

                        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
                            6 months

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

                              • TrickDacy@lemmy.world
                                6 months

                                Maybe you used to work with me? haha

                            • onlinepersona@programming.dev
                              6 months

                              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
                            6 months

                            Still using div in 2025

                            No

                              • YoSoySnekBoi@kbin.earth
                                6 months

                                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 [he/him]@programming.dev
                                    6 months

                                    I actually nest everything in <p>s

                              • The_Decryptor@aussie.zoneEnglish
                                6 months
                                <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
                                    6 months
                                    • 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
                                        6 months

                                        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.

                                  • TrickDacy@lemmy.world
                                    6 months

                                    Do people who talk this kind of shit about css really not understand they’re just admitting they’re not good at css?

                                      • cbazero@programming.dev
                                        6 months

                                        If you need to be good at a layout language to center something, then maybe the layout language sucks.

                                          • TrickDacy@lemmy.world
                                            6 months

                                            What it says is zero knowledge on the part of the whiner.

                                            • irelephant [he/him]@programming.dev
                                              6 months

                                              You literally just have to give it a width and add margin: 0 auto;

                                                • humorlessrepost@lemmy.worldEnglish
                                                  6 months

                                                  I think it’s implied they’re talking about centering both horizontally and vertically. And probably with unknown height.

                                                  Still easy these days , though.

                                                  • 𝕱𝖎𝖗𝖊𝖜𝖎𝖙𝖈𝖍@lemmy.world
                                                    6 months

                                                    Or use Flexbox

                                                    But your solution works as well for simple cases

                                                      • irelephant [he/him]@programming.dev
                                                        6 months

                                                        I generally avoid flex for simple stuff (i like weird browsers), but for more complex layouts it should certainly be used.

                                                  • Whelks_chance@lemmy.world
                                                    6 months

                                                    If it were designed properly you wouldn’t need to be good at it, it would be trivial and obvious to do the only thing anyone ever needs to do to their content within an area of the page

                                                      • TrickDacy@lemmy.world
                                                        6 months

                                                        Good news: centering a div is insanely easy to do and has been for like 15 years.

                                                          • Windex007@lemmy.world
                                                            6 months

                                                            You probably didn’t expect that comment to make me feel so old.

                                                              • TrickDacy@lemmy.world
                                                                6 months

                                                                Haha, sorry bout that. If it makes you feel any better, I felt pretty old about writing it too!

                                                              • GenderNeutralBro@lemmy.sdf.orgEnglish
                                                                6 months

                                                                The last time I did any html/css work was about 15 years ago. Now I’m curious what’s changed.

                                                                  • myotheraccount@lemmy.world
                                                                    6 months

                                                                    flex box, grid layout, and a million other things

                                                              • Quibblekrust@thelemmy.clubEnglish
                                                                6 months

                                                                I’m not good at programming Brainfuck, either.

                                                                  • TrickDacy@lemmy.world
                                                                    6 months

                                                                    You probably haven’t put any effort into learning either language. I find that people who whine about css to normally be backend programmers who are really terrible at design and want a scapegoat to blame.

                                                                      • Quibblekrust@thelemmy.clubEnglish
                                                                        6 months

                                                                        You have a real fuckin’ hard-on for CSS, don’t ya?

                                                                          • TrickDacy@lemmy.world
                                                                            6 months

                                                                            I have side eye for those with hate boners for it

                                                                              • Quibblekrust@thelemmy.clubEnglish
                                                                                6 months

                                                                                You think my joke was a “hate boner”? You need to smoke grass or touch weed or something.

                                                                                  • TrickDacy@lemmy.world
                                                                                    6 months

                                                                                    I think you are misunderstanding a lot here

                                                                                      • Quibblekrust@thelemmy.clubEnglish
                                                                                        6 months

                                                                                        Nope. I have you pegged.

                                                                            • 𝕱𝖎𝖗𝖊𝖜𝖎𝖙𝖈𝖍@lemmy.world
                                                                              6 months

                                                                              Same with people who complain endlessly about JS/TS letting you add a string to an object. I work with this shit daily, these are literally the least of my problems.

                                                                                • TrickDacy@lemmy.world
                                                                                  6 months

                                                                                  Totally agree.

                                                                              • squirrel@piefed.kobel.fyiEnglish
                                                                                6 months
                                                                                div {
                                                                                  display: grid;
                                                                                  place-items: center;
                                                                                }
                                                                                
                                                                                • finitebanjo@piefed.worldEnglish
                                                                                  6 months

                                                                                  Oh, sorry, you can’t use float to align items side by side in desktop and top to bottom in mobile in this context while specifying the height! Looks like you just won’t have a reactive website, jackass! Maybe go back to flexbox with all the nonreactive weenies, loser!

                                                                                  • Korthrun@lemmy.sdf.org
                                                                                    6 months

                                                                                    Lol, easier to write an article theorizing the ways it can be done than to just show him a centered div.

                                                                                    • Ensign_Crab@lemmy.worldEnglish
                                                                                      6 months

                                                                                      It’s nonintuitive and could have been designed better from the outset, but it’s not impossible or even difficult. Now can we fight about something meaningful?

                                                                                      vim and emacs are right there, people.

                                                                                        • Jankatarch@lemmy.world
                                                                                          6 months

                                                                                          Emacs has a better file-manager and you can setup an extremely great latex-editor.

                                                                                          Also extensions don’t randomly not work on bsd as much. There is even evil-mode and no-window option.

                                                                                          The only place vim wins at is that there is an optional and lightweight autcomplete with lsp support you can activate by pressing <C-n> or <C-p> in gvim during interactive mode.

                                                                                          And NOBODY uses it.

                                                                                            • luciferofastora@feddit.org
                                                                                              6 months

                                                                                              Vim has one critical advantage though:

                                                                                              I learned it first

                                                                                          • Eskuero@lemmy.fromshado.ws
                                                                                            6 months

                                                                                            <center></center>

                                                                                            • LumpyPancakes@piefed.socialEnglish
                                                                                              6 months

                                                                                              I only know how to stick it in a cell in a table and center the cell.

                                                                                              Never learned css, a bit left behind now hehe.

                                                                                              • jaschen306@sh.itjust.works
                                                                                                6 months

                                                                                                I manage a small website and the CSS images messes with your core web vitals.

                                                                                                You can’t lazy or eager load css so it basically render blocks everything.

                                                                                                • velindora@lemmy.cafeEnglish
                                                                                                  6 months

                                                                                                  What is Temani?

                                                                                                    • tiredofsametab@fedia.io
                                                                                                      6 months

                                                                                                      I assumed it was a personal name, but I don’t know.

                                                                                                    • onlinepersona@programming.dev
                                                                                                      6 months

                                                                                                      CSS is trash. Always has been, always will be.

                                                                                                        • TrickDacy@lemmy.world
                                                                                                          6 months

                                                                                                          Skill issue.

                                                                                                            • onlinepersona@programming.dev
                                                                                                              6 months

                                                                                                              Yeah, using trash is definitely a skill issue. You’re right about that.

                                                                                                                • TrickDacy@lemmy.world
                                                                                                                  6 months

                                                                                                                  So you’re saying it’s a skill issue that you try something you’re bad at? Seems unnecessarily hard on yourself.

                                                                                                                    • onlinepersona@programming.dev
                                                                                                                      6 months

                                                                                                                      I do not envy the monkey apt at throwing shit. If you find it a useful aptitude, good for you.

                                                                                                                        • TrickDacy@lemmy.world
                                                                                                                          6 months

                                                                                                                          Again I go back to: you’re just telling everyone you’re not good at it. Whine all you want, the web will not be dropping css anytime soon.

                                                                                                                            • onlinepersona@programming.dev
                                                                                                                              6 months

                                                                                                                              So what, it’s still a trash language.

                                                                                                                                • TrickDacy@lemmy.world
                                                                                                                                  6 months

                                                                                                                                  Error: runaway loop detected.

                                                                                                                    Programmer Humor@programming.dev

                                                                                                                    programmer_humor@programming.dev

                                                                                                                    Subscribe from remote instance

                                                                                                                    Create post

                                                                                                                    Report community

                                                                                                                    Modlog
                                                                                                                    You are not logged in. However you can subscribe from another Fediverse account, for example Lemmy or Mastodon. To do this, paste the following into the search field of your instance: !programmer_humor@programming.dev

                                                                                                                    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

                                                                                                                    • Keep content in english
                                                                                                                    • No advertisements
                                                                                                                    • Posts must be related to programming or programmer topics
                                                                                                                    Visibility: Public

                                                                                                                    This community is visible to everyone.

                                                                                                                    • 569 users / Day
                                                                                                                    • 572 users / Week
                                                                                                                    • 586 users / Month
                                                                                                                    • 14.5K users / 6 months
                                                                                                                    • 2.34K posts
                                                                                                                    • 90K comments
                                                                                                                    • 2 local subscribers
                                                                                                                    • 31.9K subscribers
                                                                                                                    • UI: 1.0.0-beta.0
                                                                                                                    • BE: 1.0.0-alpha.20
                                                                                                                    • Modlog
                                                                                                                    • Instances
                                                                                                                    • Docs
                                                                                                                    • Code
                                                                                                                    • join-lemmy.org