mfw trying to center something in css
Mfw trying to center something in css
Other urls found in this thread:
>left: 50%;
>position: absolute;
>transform: translatex(-50%);
>mfw
>margin : 0
:^)
kys
Use 2 nested flexboxes
css, javascript, html5, bootstrap, jquery etc... is cancer
In 10 years time we'll maybe progress to have sites as good as flash sites were 10 years ago.
>text-align:center;
>margin:auto;
>tfw Apple swift is a bad copy of AS3
>tfw Apple killed AS3 and can't make good clone
KYS Apple
When did this
something
become hotter than this
something
?
1997 called and asked for their shitty markup back... sheesh. Just because youre a brainlette doesn't mean everything is hipster shit.
Center tag was for text alignment, in other words inline content.
For centering blocks use margin-left and right
The whole point is to use external styles that can be reused and therefore only get downloaded once for all your pages.
Ugh. CSS is such a shitshow. Something like flexbox should have been in the very first version. It's absurd that it took them years to even begin doing centering right.
flash was never good. early 90s web design is the pinnacle of practicality and ease of use, see: classicdoom.com
Old DOOM sites are kino
Ugly solution
There is a jQuery plugin for that.
>mfw it looks different in firefox, chrome, ie and safari
Thank fuck I'm not a web designer and have to deal with those things.
Because of ~semantic markup~. HTML tags should describe what the element is, not how it's styled/presented.
It's popular with hipster dipshits, but it's still a good idea.
display:flexbox is your friend
that won't work for 90% of shit
yea but his whole point is why can't css have some shit like "position:center;" and be done with it.
centering a 20x20 pixel box is fucking retarded you have to margin 50% then cut off 10px of the opposite margin or some ghetto stupid shit
flexbox nigga
>display: flex;
doesn't work
>align-items: center;
doesn't work
>justify-content: center;
doesn't work
kill self
Don't centre the thing on the website, centre the website on the thing
For block elements:
margin: 0 auto;
For absolute elements:
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
Old-school way:
position: absolute;
width: 300px;
left: 50%;
margin-left: -150px; /* width / 2 */
BECAUSE
CSS
IS
AWESOME
nope
Because CSS is an awful joke, and web browsers weren't designed to display web pages.
Works on Firefox desktop and mobile. Good enough for me!
If anything takes more than 5 min to figure out in CSS stop.
Throw it into a and you're done.
I hate UI shit. Backend is bae. Can't spell backend without bae.
@mixin centered {
left: 50%;
position: absolute;
transform: translatex(-50%);
}
.shit-to-center {
@include centered;
}
width: 50%
margin: auto
Wow that was hard.
>tfw this shit works like 2% and no one can ever explain why
ITT: "I don't know how to use flexbox"
tfw perfect centering on my site after several months of trial and error
.center { text-align: center;}
centered text
>this is what webdevs do all day
Because for some reason web browsers are never ever suppoused to show compile/runtime errors when someone shoves literal gabage into it, so now we need to idiot-proof everything and disallow situations where someone puts two center tags right next to each other