1149
you are viewing a single comment's thread
view the rest of the comments
[-] obinice@lemmy.world 43 points 2 months ago

Okay but how do u center a div in 2025

[-] umbraroze@slrpnk.net 17 points 2 months ago

If using plain CSS, usually it's enough to set width appropriately, and margin-left and margin-right to auto.

If using a Modern Frontend/CSS Framework, then may God have mercy on your poor soul.

(Seriously I just started a new project with TailwindCSS and I'm so confused. But not entirely desperate yet.)

[-] Korhaka@sopuli.xyz 11 points 2 months ago

So what is the point of these frameworks if they make it harder?

[-] Ricaz@lemmy.dbzer0.com 16 points 2 months ago

If you spend a lot of time on a single framework, you will transcend and become a sort of frontend diety, growing multiple extra limbs allowing you to type in CSS classes faster than any mere mortal

[-] SaharaMaleikuhm@feddit.org 10 points 2 months ago

Until everyone moves over to the next thing and you start from 0 again. Web dev is a nightmare.

[-] toddestan@lemm.ee 5 points 2 months ago

Generally I find many these frameworks will make some complicated things simple, but the cost is some things that were once simple are now complicated. They can be great if you just need the things they simplify - or in other words can stick to what they were intended for, but my favorite way of keeping things simple is to avoid using complicated and heavy frameworks.

[-] loics2@lemm.ee 4 points 2 months ago

w-... mx-auto, replace the 3 dots with your desired width value, and that's it with tailwind

[-] Ricaz@lemmy.dbzer0.com 3 points 2 months ago

I'm doing a small hobby project (a ladder/ranking system for playing beer sports with my community), and I tried out Tailwind.

I gave up and loaded Bootstrap instead, but I will probably end up just writing all the CSS myself.

Seems so silly to have 15 CSS classes on a single DOM element..

[-] FooBarrington@lemmy.world 1 points 2 months ago

Why is that silly? As long as the classes follow a strict naming scheme & have useful abstractions, that seems much better than having to give every node a unique class name that doesn't necessarily have much meaning. I can't count the number of "container" and "wrapper" and "content" classes I've seen & written, where the names don't describe anything useful.

[-] bleistift2@sopuli.xyz 1 points 2 months ago

Who’s saying you’re using the frameworks correctly?

[-] lord_ryvan@ttrpg.network 1 points 2 months ago

My brother in Christ TailwindCSS just gives classes that let you do inline styling in a shorter syntax! (and theme configuration, but mostly inline styling)

Replace width: ...px with w-..., margin-left: ... with ml-... and margin-right: ... with mr-.... Setting both horizontal margins is mx-... and both vertical margins is my-....

If you can do inline styling, TW just makes the syntax a bit shorter, but that's it, really.

[-] impedans@lemmy.world 10 points 2 months ago* (last edited 2 months ago)

If you define what you mean by centering I'll give you a straight answer.

Vertically? Horizontally? Center the text or the entire box? Compared to the viewport, the parent container or the entire page?

"Centering" isn't as straight forward as you'd think, and what you actually want usually depends on the situation.

[-] FooBarrington@lemmy.world 7 points 2 months ago
[-] impedans@lemmy.world 4 points 2 months ago

Yeah that works if you wanna center a box of content it relative to the parent container, either horizontally or vertically. For other situations we've got different tools

[-] Schadrach@lemmy.sdf.org 3 points 2 months ago

Fuck it, align='center'. That'll center it horizontally relative to some context and if that's not good enough then you should have been more precise in your request.

[-] endeavor@sopuli.xyz 8 points 2 months ago* (last edited 2 months ago)

While centering div, you add one to 2023.

[-] x00z@lemmy.world 5 points 2 months ago

Ask the browser nicely while using please and thanks.

[-] onion_trial@europe.pub 5 points 2 months ago

You count half the pixels and put them in a margin-left

[-] WhiskyTangoFoxtrot@lemmy.world 5 points 2 months ago* (last edited 2 months ago)

Make your web page in GIMP, export to PNG, <img>.

[-] Anomalocaris@lemm.ee 2 points 2 months ago

maybe the div is already where it's meant to be

[-] MadhuGururajan@programming.dev 1 points 2 months ago

use

display: flex flex-direction: column align-items: center

on the parent container

[-] irelephant@programming.dev 1 points 2 months ago

What threw me was having to set a width.

[-] hakunawazo@lemmy.world 1 points 2 months ago

It's not about the center, it's about the friends we made along the way.

this post was submitted on 07 May 2025
1149 points (100.0% liked)

Programmer Humor

25471 readers
1314 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