Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Search - "vertically align"
-
Time spent on Web Development :
1% : {
actual productive content and features
}
99% : {
Please. All I want is for this div to vertically align in this other one. Is that too much to ask?
}13 -
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!22 -
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?10
-
How to vertically center in css..
set "text-align" to center and then rotate your screen by 90 degree. :D6 -
I DID IT :D
I VERTICALLY ALIGNED A DIV IN CSS
I'm a noob in front-end development, I usually use bootstrap but now I did it in vanilla CSS inside ReactJs =D
or is it lol, I don't know, I used these:
position: "relative",
top: "50%",
transform: "translateY(-50%)"
source: https://stackoverflow.com/a/441616615 -
When someone makes fun of UI development, and you challenge him to vertically center align a div. Challenge accepted and lost :D9
-
Just got into web development.
Y U NOT WORKING RIGHT?
How do you guys make really complex websites when I can even center an unordered list without the first child...
I write something like align-vertically: center;
And what does it do? NOTHING!
And if it does something, it mirrors the whole page, makes it all bright pink and then everything explodes and I'm alone in a dark void, only me and my PC are there and somehow I have access to the internet.
And then I look it up at stackoverflow and I'm like: Oh, ok, I'll do it this way then.
And it still doesn't work and does absolutly nothing!
So I'm trapped in this void of nothingness till the end of my days.
At least that's what it feels like.9 -
When you can't vertically align text because it breaks - webkit-background-clip and only way to do that, is setting line-height same as container height.1
-
The ability to vertically align in css correctly. On my first try.
That would save me a world of headaches... 😒5 -
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 :D12 -
!important;
Using bootstrap I want to create a table so that the thead is fixed and no matter how many rows are generated on loop , the thead will align properly with the tbody. I will keep the thead fixed so that only body will scroll vertically.
So the problem is on a responsive table how do I match the cell alignment and spacing of the head to the body cells.
Have wasted a day on this fed up. P.S on smaller screens I have set overflow to scroll vertically. Please help.10 -
I recently joined a project team in my company whose client is a BIG (and I mean BIG) tech company.
We offer marketing solutions to the client. This means we create websites that showcase the company and all the good stuff that they do.
When I was going through my ramp-up meetings, my lead gave me some dummy projects to build just to get an idea of where I stood as a web developer.
So, it was one of those Photoshop mockups that were to be made entirely using vanilla JS, CSS3, HTML5 and nothing else.
There came many points where I had to align items either horizontally or vertically. So, I used flexbox to do it.
I submitted my code to the lead and while going through it, he commented, "Why do you use flexbox? It is no good. Use float instead." And I looked at him in utter confusion.
Tell me, is it wrong to use flexbox? Should I have used float instead? -
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 engineer1