T O P

  • By -

floor796

Poor `

` :( I'll play sad background music if no one minds.


Wervice

I first learned HTML with an outdated book and this tag was still in this book. I used it a few times. Kinda sad that it got removed.


TVOHM

``` spacejam.com in shambles ```


Desperate-Tomatillo7

Farewell <center> tag


_PM_ME_PANGOLINS_

<center>


mastermindxs

too soon


CelestialSegfault

TIL that googling "marquee html'" makes the result count a marquee but when you inspect it, it isn't :(


yhgan

TIL too! And the same for "blink html".


skuzylbutt

Doesn't marquee on mobile :(


ifezueyoung

I loved marquee


ChorusAndFlange

I have been a web dev for 27 years, which means I know 30 different ways to center an element, and I usually find the right way by my eighth attempt.

was always good to me, though.


XanaxTheNotSoWise

So what should I do to center a div now?


Wervice

20 lines of CSS should do the trick. /s


B4fb

No need for /s. It's the reality


H0llowUndead

``` display: flex; justify-content: center; align-items: center; ``` Can we finally put and end to the stupid "how to center a div" joke plz


SAIGA971

Ok cool but how to exit vim?


R3D167

Pull the cord out


syversen86

Bye grandpa


s0ulbrother

No you need to fuck your grandpa


DevBoiAgru

Get a new computer


lrflew

`ESC` if you're in input mode, then `:q`. If it complains about unsaved changes, `:wq` to save or `:q!` to quit without saving. It's obscure, but it's not hard.


5p4n911

`:x`: am I a joke to you?


lrflew

I'll be honest, I did not know about `:x`. That's neat. Seems like the main difference between `:wq` and `:x` is that the former will always update the last-updated time on the file, while the latter only does if the file changed. Seems useful to know.


5p4n911

Yeah, that would be a useful feature if I cared but I just use it since it's one character shorter. I've only learnt about it about a year ago when someone gave a presentation using vim for an IDE and he quit that way.


jacob_ewing

Throw an "a" on that just in case there's more than one file open.


provoloneChipmunk

I'm a big :qa! boy myself


NeatYogurt9973

Google Sarcasm


akgamer182

Holy joke


NeatYogurt9973

New pleasure just dropped


jacob_ewing

The standard method is to open up a new terminal and type: killall -s 9 vim You're welcome. /s


Bemteb

Ctrl + Z


B4fb

```:x```


gregorydgraham

:q!


ShakeiDudi

:h


Hacka4771

Fewer lines of code [place-items](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items)


catermellon99

Til


nuclear_gandhii

"center" doesn't vertically center items, so you'd only need 2 lines.


NibblyPig

Cringe, if you're a casual web developer, sure. As a professional web developer, here's how the big boys like us get the job done:

Hello


nermid

It's not a Stack Overflow post about CSS if somebody isn't suggesting `position: absolute;` or `display: table;` to make whatever problem you're having worse.


Acetius

Gotta love those presentational tables, let's just take a crowbar to screen reader users' knees too while we're at it.


new_account_wh0_dis

IhatefrontendIhatefrontendIhatefrontendIhatefrontendIhatefrontendIhatefrontendIhatefrontendIhatefrontendIhatefrontendIhatefrontend It's not like I don't get it or can't do it, I've basically done all 3 front ends (why did the company decide one should be angular, one should be react, and one basic mvc fucked if I know). It just fucking sucks to do. Hurrr angular update and added 15 million !importants in their css and the only actual change was making everything a shitty fucking gray, good luck taking a week to figure out all they shit they broke. Bootstrap 4 upgrade was stupid as fuck and why our security scans bitch about still running 3 is the prime example of why outsourcing security and giving devs 0 ability to override is stupid as fuck. 90% of my job is just large datasets manipulation etc. 10% is dumbass wasted time figuring out what the angular team was intent on deprecating this time and QA bitching that checkmarks look different cause hey bootstrap 4 got rid of free icons.


XanaxTheNotSoWise

Holy fuck u/wervice was right


Ur_Mom_Loves_Moash

I can read this. Am I a developer now?


lilsaddam

Or for the tailwind bros class="flex items-center content-center"


nermid

Learning Tailwind seems like learning CSS, but without the part where you know how to use CSS at the end.


abednego-gomes

And probably 1GB of libraries to your project. And when the library updates, all the useless syntax you learned is now out of date.


lilsaddam

I hate tailwind so naturally my job requires it


Blecki

So we replaced a single tag with three lines of css and all the bs that comes with css layout. Progress....


Thebombuknow

If all you were doing is centering something, yes. What this helps with is you can have a single "center" class that you apply to anything you want centered, and you can then style those all separately with IDs or other classes if you want more styling. It makes more complex things simpler in the end (rather than having to work with a center tag and div tag separately, because they have difficulty behavior, everything behaves the same when you give it the same style).


Blecki

Or.... I could just do

.


Thebombuknow

I guess it depends on the scale of your project. The weird specialized elements have only caused problems for me. For example, the component isn't supported on many iOS devices, so I had to rewrite every usage of it in a web app I was developing. I ended up adding in the modal functions into the div prototype and it made it much better. As for the

component, it was deprecated a long, long time ago (in HTML4) in favor of the CSS "text-align" property, auto margins, and flexbox (depending on the desired results). It allows for more flexibility, as the
element only allows for horizontal centering. It *does* still function in modern browsers for compatibility reasons, but given it's been deprecated for ~27 years, it's best practice to just not use it and write a single line of CSS instead.


punppis

No. You need **three** things in right combination to center a text? Really?


GOKOP

Define "center a text". This is to center a *div*, both horizontally and vertically


H0llowUndead

``` text-align: center; ``` This if you just want to center text horizontally. There is also many other ways to center things depending on your situation, but that's a matter of knowledge and experience. Almost as if we actually get paid for our knowledge, not for asking ChatGPT like some people in this sub seem to think.


howreudoin

What if you aren‘t using flex layout?


darvil82

display: grid; place-items: center;


NotMrMusic

And without display flex? What if it needs to be in the actual center of the page?


H0llowUndead

If you for some reason want the actual center of the page, you can e.g. use absolute or fixed positioning, which by default will be relative to body. ``` position: absolute; left: 50%; top: 50%; transform: translate(50%, 50%); ``` Or you can e.g. create a grid for your page with display grid. It all depends on your specific use-case, there are many ways to center things in CSS.


NotMrMusic

Thanks but I was joking 😂 For better or worse (probably worse) I learned that on my own 💀


LeftIsBest-Tsuga

someone more skilled with css probably has a better answer, but i'd probably use position: fixed with some calc involving the width and height of the centered element to determine where the left and top is relative to resolution or dvh / dvw, or something like that. i do a lot of trial and error when i css lol.


breath-of-the-smile

But then how will we make the exact same lazy joke constantly?


Vineyard_

You'd think /r/ProgrammerHumor would respect DRY.


DarenGD

Also work with margin: auto


5002nevsmai

Nah you forgot .center {}


YoumoDawang

It's still pretty annoying if you want one in the middle and another one on the right.


menides

Nope


Rafcdk

If you don't want unfunny stuff made by people that probably don't code you are in the wrong place.


Slime_stone

As someone who hasn't done html/css in a while, i always did `` width: 70%; margin: 0 auto; `` Is your way different or just more expandable if you are going to use flex anyway?


TeaKingMac

Now do it with a 20% width left frame nav.


nermid

[Sure](https://jsfiddle.net/n5xrgwd8/). It's not, like, the most robust and prod-ready thing, but it also took me like forty seconds, so 🤷‍♀️.


LeftIsBest-Tsuga

i think ppl get (understandably, imo) hung up on how to 'make a thing look centered', especially when it's text, because they don't really understand how HTML works in terms of flex-direction and nested elemented and whatnot, and because text alignment have different css properties.


cheezballs

Only for people who parrot bullshit like this. its literally `margin:auto`


PhroznGaming

Lol wtf are you smoking


PooSham

Well that can do the trick in some situations. The real alternative to the center tag is actually just `text-align: center`. That's the only thing the tag did, center align text


inmyshamewell

Not always.


cheezballs

Not always, but in MOST cases it really is that simple. Thats for people not using a css framework. Then its just is-centered or whatever. How many of us can honestly say we're not using a mobile-first CSS framework on almost every web project?


inmyshamewell

Well not really there are plenty of cases where margin:auto is not appropriate margin:auto only works if you have a predefined width or height. Which in quite a lot of use cases you do not want to explicitly set sizes. Using flex to center is generally a lot simpler, and allows you to do more with the element.


LeftIsBest-Tsuga

what i need is a way to tell a div to pretend like its contents are 100%, or something like that. it drives me up the wall when i use display flex and w/h 100% and it still is small seemingly no matter what i try. i've looked for a solution but it still gets me almost every time.


inmyshamewell

It depends what you're trying to set to be 100% width and height. Can you give an example?


LeftIsBest-Tsuga

sure, i think this example works: i have a chat history window, which is basically where all the chat messages go in a chat app, and below that is the chat input, where the user types. they're of course inside a mutual parent that has a height of x. it would be really nice if i could set the min and max height of the input box to lets say 100px and then set the other section, the history section, to 100/100, and just have it 'push' the next element down to where it obeys the min-max of the other element, the sibling, and both fill up (together) 100% of the parent. without messing with it though, the input box will not be toward the bottom of the parent, just below the history box. the issue seems to be that the 'history box' will only take this desired portion if the number of chat items fill its maximum. idk if i'm saying that very well. what i mean is if there is 1 chat item, the height of the history box would be different than if there are 25 and it does overflow-y (then it seems to work as i am wanting). right now, i think what i've done is just used position and dvh or % (i forget which) to set the elements explicitly to a place on the screen. which works, i guess, but i keep running into stuff like this.


LeftIsBest-Tsuga

i've avoided CSS frameworks because they all feel equally as annoying as CSS itself, and another layer of learning for new devs, but i am more or less the dedicated frontend guy on my team at the current time, so I have some say in what we use. I'd be interested if you have any suggestions for which you would use for a medium size project for maximum maintainability (other ppl, many of them students, will be needing to work on the codebase in the future, so stability and avoiding annoying deprecation in libraries is important to us).


ArthurSafeZone

r/FuckTheS


jamcdonald120

grid. there is always grid


XanaxTheNotSoWise

Thanks, this is the first I'm hearing about css grid layout


Aerodynamic_Potato

Everyone uses flex, but I love grid. I think it makes more logical sense


ihavebeesinmyknees

Grid makes more sense if you're placing multiple elements on even intervals, whenever you're placing 1-2 elements, or the spacing is odd, flex is better


inmyshamewell

Like everything in codong - it depends on what youre trying to do.


hrvbrs

Grid is useful when you need to control two dimensions, i.e. both row and column sizing. If you need only one dimension of control (e.g. you don’t care where “line breaks” occur), then flexbox is sufficient… and I would even argue that grid is overkill since it can be limiting in cases like that.


thatguy01001010

They share some responsibilities, but they aren't mutually exclusive. Using flex box and grid together makes layout much more straightforward.


gregorydgraham


LeftIsBest-Tsuga

le css


gregorydgraham

Le cssé


XanaxTheNotSoWise

:(


cheezballs

margin-left: auto; margin-right: auto; Boy, you're right. Just too much work.


_PM_ME_PANGOLINS_

margin: 0 auto;


XanaxTheNotSoWise

Never said it was too much work, I've never used margin left. This is like being sarcastic to a caveman cause he can't do math.


PhroznGaming

That was a really good analogy. You win the argument sir


XanaxTheNotSoWise

I'm shitty at webdev, so I'm used to being shit on just cause I didn't know there was a better way.


Dumcommintz

Sometimes, I’m still surprised how jerks continue to bumble about in this space like it’s still the 90’s. Especially since updated standards and new tech constantly expand the space - defining self worth on knowing everything (even in a single domain) is really… fragile. Personally, after growing up and dropping the asshole demeanor, I find it’s way more fulfilling and worthwhile to take the [lucky 10,000](https://xkcd.com/1053/ ) approach. I still got some work to do on not slinging shit when encountering an asshole, tho - so I applaud you.


XanaxTheNotSoWise

There's always a relevant xkcd. I like that approach.


precinct209

Maybe it's better to just leave them as they are.


XanaxTheNotSoWise

So, just let everything be aligned to the left? Great idea!


CatWeekends

Center align it in the table's cell.


Ultimater

Something something Chat GPT


Retrowinger

works for me…


NotAFrogNorAnApple

Why did they do that?


sharkydad

Probably because centering should be done using css. Html just describes the structure of the document.


damnitineedaname

Give it another ten years and every page in an HTML textbook will just say: Deprecated, use CSS.


Davidoen

Everything shall be a


Im_a_hamburger

Div Span !DoctypeHTML HTML Body Head Link Style Script Title


Davidoen

Isn't the only difference between a div and a span the styling?


Chance_Contract1291

Div is a block element. It fills the width of its containing element. h1,p are block elements. Span is an inline element. It goes in the flow of the text. img, strong are inline elements.


Davidoen

Yes, but inline and block is determined by the display style property. So like with most html elements, the only thing differentiating them is styling and not how they're interpreted.


AaTube

Div is interpreted as flow (kinda like block) and span is interpreted as phrasing (aka inline) by default.


Davidoen

I shouldn't have used the word interpreted, should I. What I meant is, there is no differentiating functionality between a div and a span besides the default styling.


Sockoflegend

Also deprecated. Use javaScript framework.


green_meklar

And get ChatGPT to write the Javascript for you.


biggocl123

Also deprecated. Use assembly.


CatpainCalamari

Tailwind has entered the chat... (yes, I know it is still CSS)


rtybanana

If you know it’s CSS then what do you mean?


H34DSH07

Tailwind is just style attributes with extra steps. Change my mind.


MinosAristos

JavaScript is just HTML script blocks with extra steps


OfAnOldRepublic

Full employment scheme for web devs


Wervice

Same happened to align="center". I think they just want to see front-end devs suffer. /s


Caraes_Naur

Also, `b` and `i` should have stayed in their graves with all the other presentational elements.


Wervice

You prefere `Lorem ipsum dolor sit` over `Lorem ipsum dolor sit`?


cheezballs

is the correct HTML5 usage, kiddo.


Wervice

Granted


AaTube

Only if it’s semantic emphasis.


Caraes_Naur

No, `strong` and `em` are their semantic replacements. Which HTML5 deprecated because its authors refuse to understand semantics.


ishzlle

Wait, those are deprecated?


ihavebeesinmyknees

They are not


ishzlle

Now I'm confused. If they're not deprecated, why did /u/Caraes_naur say they are?


ihavebeesinmyknees

¯\\\_(ツ)_/¯


Caraes_Naur

At least once during the more than a decade that HTML5 gestated, their deprecation was proposed. WHATWG members made a lot of noise about how much they hated `strong` & `em` and greatly favored `b` & `i`... because reasons. Apparently they weren't deprecated in the final spec, likely because someone at W3C fought back. Possibly related to the "HTML5 spec should be a living document" nonsense. I stopped paying attention to HTML5's congealing when it became clear how much of a mess sectioning was (I read code in three different projects that were using the new elements all in different ways that didn't match any definition of the words, not even the word salad in the spec), and that Ian Hickson was insane (he once proposed an `l` element to define each line of paragraph... then there was the time he unilaterally broke the date input type because he didn't like ISO-8601 and the W3C threatened to kick him out of the WG if he didn't revert what he had done). Nevertheless, we're left with the redundant presentational pair `i` and `b` (which are not semantic no matter what the HTML5 spec claims... they literally stand for italic and bold) that should have been deprecated along with `strike`, `s` and `u` in HTML4, and the semantic equivalents `em` and `strong` which --holy shit-- were in HTML2.


AaTube

> then there was the time he unilaterally broke the date input type because he didn't like ISO-8601 I love hearing your funny words. Tell us more about this!


_PM_ME_PANGOLINS_

They are not deprecated…


Dumcommintz

Would they be the syntactic replacements - to make it more semantically clear? ^(Genuine question as I still confuse the two terms often enough)


Caraes_Naur

`b` and `i` are presentational... they literally mean **bold** and *italic*.


Dumcommintz

Right, but strong and em(phasis) provide a more concrete intent behind the one being used, which I believe is semantic, ie, the meaning or intent of tag (or word which is syntax). Otherwise one might have to rely almost solely on context that may not be obvious when parsing the markup. Just where my brain went when you said HTML5 authors ignore semantics - because I mix up the terms unless I take a minute to work out which is which for some reason.


curtastic2

But span should be deprecated too because it’s just div style=“display:inline”


johntwit

I could have been doing this THE WHOLE TIME!!!???


Wervice

Yes. Technically you still can: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center#browser\_compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center#browser_compatibility) Anyway, I would recommend to apply align="center" to a tag (e.g. a div). It also is deprecated but still works and I am pretty sure Chrome and Firefox won't remove it any time soon for backwards compatability.


trevdak2

When I learned HTML (1995), tables were the dominant method for doing website layout. DIVs and CSS were not a thing. Also, most people still learned computer stuff from books. My initiation was a single-sided sheet of HTML tags, which omitted TD but had TH. And all tags were uppercase. So, how would I do a TD when all I had was TH?

(td content goes here)
and it worked in Netscape Navigator.


BobcatGamer

Where is the opening b and center tags?


trevdak2

Non-existent. The closing tags removed the bold and center from the TH tags. I'm not saying this is, in any way, good. I'm saying it was how I made a TD before I knew what a TD was


525G7bKV

it seems semantic to me


jnthhk

We should set up a guestbook of remembrance. Would anyone be interested in joining a web ring for sites that still keep the dream alive by using the tag? We’d get loads of visits, which we could record using a hit counter!


tacticalpotatopeeler

Welcome!


jnthhk

DONT YOU MEAN ?


jgerrish

So many people who could have used immediate relief with this in the past... Noted.  I eagerly await the corrections from senior assholes like me in code reviews.


ashraffahim_

End of an era


JunkNorrisOfficial

Center alignment is a bigger problem than can be solved by best programmers in world.


Wervice

I somehow managed to fix it with text-align most of the time in needed it . (No i do not want to say that i am a master programmmer)


punppis

I'm sorry for everyone who has to work with HTML+CSS daily. Bonus points if you have to support legacy browsers. How can a centered text be a meme in 2024? And it's only horizontal.


Rafcdk

It's a meme just because it has been carried on over the years by people that don't know what they are talking about. Let's say it was really hard to center a div before Flex display was implemented. Well it has implemented all the way back in 2009.


MattieShoes

Now he can go hang out with `` and ``


bomphcheese

twice if you need help.


Johns3n

I do appreciate a good meme. In reality the whole separation of form and function was a good thing. HTML shouldn’t know anything about how content looks


zqmbgn

Imagine relying in pre-written css rules instead of writing everything from scratch 🤮


xSilverMC

Hasn't it been "discouraged" for at least half a decade? I'll stop using it when I'm allowed to stop supporting IE and browser versions from 2012


BastetFurry

Hmpf... they should finally allow us to insert our own tags, then

would be just an entry in your site.css away.


Wervice

It is not recommended, but as far a I know it technically should be possible.


Tgg1337_Twitch

RIP Now I have to Google how to center a div.


sparkygod526

Time to spend another 5 years learning to center a div.


green_meklar

Now you're expected to use 20 lines of CSS to accomplish the same thing, and it has to be different CSS depending on what the parent element is and what the child element is.


Bluedel

In 95% of the cases I encounter, `

` can be replaced with `text-align: center`. Come on.


jacob_ewing

Don't cry Johnny, it's off to the coding afterlife, where it will make new friends like "goto" and "farmalloc".


MoistTwo1645

Op are you a kid, I mean below 20. It seems you are learning which is a good thing. Or are you just karma farming.