My colleague managed to vertically align in CSS.

Accidently.

He doesn't want it that way.

Dafuq

I used CSS to vertical align some text..

without checking Stack Overflow

Properly align a div before you leave teenage.

CSS before Flexbox

When you think you are a fairly decent programmer, then you try to align two buttons next to each other in CSS

TABLE BASED WEB DESIGN

I was surprised there were no rants about this topic before I realized it was more than a decade back 😳

We've never had it better! So to help add a little perspective for all those ranting about what is unarguably the golden age for web developers... let me fill you in on web dev in the late 90's;

JavaScript was a joke. No seriously! - I once got laughed out of the room for suggesting we try use it for more than disabling a button - (I wanted to check out the new XHR request thingy [read AJAX]).

HTML was simple and purely a markup language (with the exception of the marquee tag). The tags were basically just p,ul,ol,h*,form inputs,img and table and html took 10 minutes to learn. Any style was inline and equally crude - anything that wasn't crude could not be trusted and probably wouldn't render at all in most browsers (never mind render correctly).

There were rumors of a style TAG and something called a cascading style sheet which were received with much skepticism since it went against the old ways and any time saved would be lost writing multiple [IE version specific] style sheets for each browser just to get it to work - so we simply didn't.

No CSS meant the only tags you had to work with to create a structured layout were br, hr and table... so naturally EVERYTHING was in nested tables! JS callback hell can't touch this! - it was not uncommon to have 50+ nested tables all with inline style in a single page which would be edited without any dev tools or linting.

You would spend 30 minutes scanning td tags until your eyes bled to find something, make a change, ftp the file to the server, reload the web page and then spend 10 minutes staring at the devastation on your screen convinced you broke
the internet before spotting an un-closed td tag with your bloodshot eyes.

Tables were not just a silver bullet - they were the ONLY bullet and were in the wild west!

Q: Want an inline form or to align your inputs left?
A: Duh table!

Q: Want a border with round-corners, a shadow or blur?
A: That's easy! Your gonna want to put that table in the center cell of another table then crop a image of the border into 6 smaller images to put in the surrounding cells... oh and then spend 10 minutes fucking with mystical attributes like cell-padding and valign to get them flush.

...But hey at least on the bright-side vertically & horizontally centering stuff was a breeze!

This rings so true. I'm a full stack backend engineer except it was today I managed to vertically align something in css🤣 which are you?

Just before you, my fellow system programmer, scroll past this, let me say this:

🍬 The web is actiually simple. 🍬

Both HTML and CSS is declarative. It's all easy when you understand the concepts, learn how to be idiomatic and quit trying to do that imperative bullshit in languages that aren't imperative.

HTML is simple. You know the boilerplate: doctype, head, body, that's all. Just mark it up and do NOT look at it before you end, mark it up as it were article or something. The appearance is up to css.

CSS is simple. You may even forget bem or rscss, you're already a skilled software developer. Use common sense and your code-splitting and naming skills you gained reading The Code Complete or doing software development for years.

Forget mockups. Forget absolute positioning, forget setting width and height in pixels. Go to awwwards, find some inspiration. Draw some buttons and fields on paper with your good old pencil. Then go and write some css. Feel free to steal some shadows and transitions from codepen.

Read about 8-pixel grid system. Let every element push away from others by setting something like margin: 16px; and whoops! You've just got fully responsive and got great vertical rhythm without even using media queries!

Oh my god, do NEVER set width and height explicitly! Type something like button { width: 120px; } and bang! The entire web page is broken. Quit that shit. Let it resize as it should. It will resize itself to fit its contents.

HTML is by default ready for your template engine. That's how you receive data from server — as server-side rendered, plain old HTML page. On the other hand, the form element is the most axiomatic and simple way to send the data to server. That's how you send it — as plain old GET or POST that every webserver can handle.

All of there are true:
1. It's easy to get great 100% responsiveness without media queries.
2. It's easy to align items in row, it's just one line of css. Maybe two, if you still want elements to wrap, but want to use flexbox:
.parent {
display: flex;
flex-wrap: wrap;
}
3. HTML and CSS are fast by default.
4. You don't need mockups to achieve great visual experience. Mockups is imperative, web is declarative.
5. You may not even need JavaScript to make great website.

Go on, ask me a question about web! I'll ready to answer everything.

My boss likes to measure the spacing between DOM elements using a ruler to make sure everything is proportional.

I forgot to remove some padding on an element so it wasn't exactly centered, so he comes in and says...

"the padding on the site is off, I think you need to use this" *drops ruler on desk*

Now I have to keep this stupid ruler on my desk because whenever I forget to align something he says... "that's why I gave you the ruler"

Too difficult to explain to these subhumans that I don't need a ruler to write proper css

Remember those margin: auto?

How to vertically center in css..

set "text-align" to center and then rotate your screen by 90 degree. :D

A classmate of mine had the task to align some content on a page to the center using CSS (using margins)
That classmate has no fucking clue because she pays no attention.

font:10px;

was the only thing she wrote into the text file that was projected onto the whiteboard.
The teachers asked: "What does font stand for?"
Her reply: "Uuuuuuh... Position?"

Kill. Me.

Why does CSS never work the way you'd expect? All I want to do is align something to the bottom of a div. No. Will not happen. You'd think it might be something simple as 'v-align' or 'align: bottom' or 'fucking put it at the bottom: now;'

No, it's never that simple. I try every result I can find from googling. Nothing. Simply does not work.

How about trying to keep a div to a square when you resize the page? That should be simple? height = width right? Fuck you. Ha hahah, no you have to implement some horrendous arcane hack involving fake elements and other bullshit.

You finally fix one thing and everything else you had working is now broken.

...and then some fuckwit comes along and goes "Oh, CSS isn't hard..." and it takes everything you have not to beat them to death with your rubber duck.

What the hell is wrong with CSS? It's not even programming! It's just pure, sadistic hell! FUCK CSS!!!!

Bootcrap. Just looked at their main page, and it's a whopping 75k of markup plus 294k of CSS (W-T-F?!), and 224k of JS. All of that shit for a page that shouldn't be more than 10k of markup, 16k of CSS, and that has no reason to even use JS at all.

<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none

Yeah, that crap is supposed to be "easier" to write. That's what you get for totally failing to understand how HTML/CSS even work, clinging to late 1990s practices, and ditching decades of progress since then.

Although the Bootcrap folks do manage to write valid HTML. As low as that sounds, but that counts already as an exceptional skill in the notoriously low-skilled frontend "dev" world that is all about making shitty websites.

Oh, and the rest like Failwind and Bulimia aren't any better. They already fail at delivering valid HTML on their websites.

As long as I suck at css, I will always have a terrible experience working with a designer.

Me: "Hmm. I should center this image."

img {
align-self: center;
}

CSS: "LOL, no. Intuitively, as a first logical guess at forgotten CSS syntax, that seems like what you ought to type. But this world makes no sense and my creator was a sadist. Here's what you actually need to do."

img {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}

everytime

CSS Vertical Alignment:

div {
display:flex;
align-items:center;
}

This is not a problem anymore, so can we stop pretending like it is?

When another "front-end developer" appends the entire bootstrap CSS file to your templates because it needs to align two elements. To templates that never included any css framework cuz i hate them... Then he asked me for help because it did not work... I fixed an invalid CSS file reference.

FUCK HIS LIFE

You know you have been coding with CSS Preprocessor for far too long when you typed this in regular stylesheet and wondering why it doesn't work...

#container {
.wrapper {
text-align: center;
}
}

Why the font doesn't align to center!!! @&$#+%*^

After completing urgent projects that rewrite a lot of "overtime" or even personal projects that rewrite like a few weeks to complete.

Old web dev days pre-BS... All the CSS needed to and the cross browser compat. The divs don't align... Can't get elements to center... Or it does, just not in browser X...

Aligning things in Microsoft Word is officially more difficult than aligning them in CSS.
Change my mind.

CSS: Vertical-Align

You know it's kinda your fault when your CSS works properly in Internet Explorer and Firefox, but doesn't in Chrome or (non-Chromium) Edge.

However:
Spec says text-align doesn't apply to inline elements, but both Internet Explorer and Firefox seem to disregard that spec and do it anyway. What the fuck?

The most frustrating part with css is like seeing people make animations on codepen where a fkin panda closes eyes or moves around,

And you are like how to Center align this box or this Dam image keeps rolling around the screen

Someone is using fucking CSS floats. To align a button to the right. In a fucking Blazor app. Dude. What the fuck.

So, I'm about to be up shit's Creek. I need a new source of income, ideally either a new job or becoming a freelancer. I have been making intranet sites with ASP.NET for a while now, and I can tell two things:
1. It's too corporate minded, so I'll need a fucking degree
2. It's too corporate minded, so I'll be stuck with people like my boss, who still use tables to align content despite the project having bootstrap.

I need to do something more fulfilling, but I probably will have to leave my job by December anyway due to some major fuck ups in my life, do I need to get something lined up. I have been brushing up on my HTML, CSS, and JavaScript skills, but when it comes down to it, I suck at design so my "portfolio" is blatant clones to learn CSS and shitty Spartan things.

Basically, I'm anxious, terrified, and unable to figure out what comes next. Do I keep sending job applications and praying to whatever deity will listen, it do I start figuring out this freelance thing? If freelance, then how do I get into it? I'm terrified and desperate.

The ability to vertically align in css correctly. On my first try.
That would save me a world of headaches... 😒

Had a class in middle school that put on a web dev competition for the county school district. I took 3rd or something because the "Gothic colors" didn't align with the county's vision. I knew I wanted to become a dev from that point forward. Side Note: I now deal very little with HTML and CSS and couldn't be happier.

To all who use CSS:
Do you vertically align using flexbox or some weird old hacky method? I just used flexbox throughout a personal project to find out it doesn't work on my mom's computer...
Sorry if this question is too serious for this, but it really bothers me :D

That moment you update your ui library, to find out this update has a small align-items css prop that breaks every form on every page.... imagine the impression when you see it all broken... priceless

I want some help with media queries I am new and learning so please don't bash me up :

Here is my css code I want to know how to solve the issue :

/* About Section */

.about
{
height:600px;
padding:50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.abouttext
{
 position: relative;
 padding: 0 50px;
 height: inherit;
}

.abouttext h1
{
position: relative;
left: 230px;
}

.abouttext img{
width:20vw;
position: absolute;
top:50px;
}

.aboutlist
{
width:50%;
}

ol
{
list-style: none;
color: #e0501b;
}

ol li
{
font-size: 34px;
position: relative;
margin-bottom: 20px;
}

li p
{
font-size:16px;
color:#000;
padding-left:60px;
line-height:30px;
opacity:0.6;
}

li span
{
float: right;
  position: absolute;
 line-height: 25px;
 font-weight: 600;
}

tests boy
- balding in his late twenties
- thinks that React is a framework
- favorite book is either 1984 or fight club
- came to IT to make an impact but obviously lacks determination to do so. Prefers not to think about it
- doesn’t know why and for what he wakes up every morning. Stopped thinking about it 7 years ago
- has a girlfriend that doesn’t allow him to penetrate her, only hugs and cunnilingus
- already forgot how does a blowjob feel like
- when it’s too hot in his room when he tries to sleep, he gets up and opens the window, and after that he doesn’t want to sleep anymore, and tomorrow is a yet another working day
- unexpected slack message sound he hears when not at the office triggers his fight or flight response
- still salty about CSS vertical-align: middle not instantly centering the element vertically
- just like 5 years ago, every day he thinks that after he learns That New Thing, he’ll begin The Real Life, and his current career state is temporary
- loves to say “it’s not my job” but only says that if absolutely sure that he won’t be reported for that
- uses vscode
- thinks he’s an engineer