51–60 of 74 posts
Pinboard tells me, I "previously saved april 2015". So I bookmarked this more than five years ago. Back then, this site was addressing a big problem and, to some degree, it's still a confounding problem sometimes. So high-five to its creator. And to the HN haterz in these comments, take a hike.
Having to still support IE 11 for most projects, I really like the following: div { position: absolute; right: 50%; bottom: 50% transform: translate(50%, 50%); }
It's time to learn flexbox
This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.
What does a JS polyfill have to do with CSS? Also, try that out in IE 11 without a polyfill. This works in IE without a JavaScript polyfill (lol): TESTING
I am not into the CSS game anymore, if anything needs to be done I'd just go with whatever widgets any CSS framework offers, but why has it been so hard for so long to center things with CSS (I believe flexbox finally fixed it) ?
Flexbox did fix it, and it's been available in Chrome since 2013, Firefox since 2014, and everything else since 2015. IE 11 supported enough of the 2012 syntax to be usable. Even IE 10 supports some of it, albeit poorly.
.element{
position:absolute;
width:500px;
height:500px;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
}
.element{ position:absolute; width:500px; height:500px; left:50%; top:50%; margin-top:-250px; margin-left:-250px; }
.element{ position:absolute; width:500px; height:500px; left:50%; top:50%; margin-top:-250px; margin-left:-250px; }
Don't do this, you will run into edgecases that make things look jank. Use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Earlier quoted context omitted.
you really use the same id twice on a page?! Heresey! Also.. I do the same (essentially: margin: 0 auto) but it works with display: block too, and you don't need text-align center on the parent.
It's not the same id: wrapper vs wrapped
It was sort of HTML-pseudocode.
In any case, this is exactly how you center something that doesn't try to stretch across the entire page. It's old-fashioned, but robust.
Also, I would generally not use inline CSS. I think of it like I think of !important: the nuclear option.
That said, I tend to use inline styles a lot for WordPress site content, because I don't want to deal with the slow-ass "customize" option.
.element{ position:absolute; width:500px; height:500px; left:50%; top:50%; margin-top:-250px; margin-left:-250px; }
Here's what I've been doing for years (The can be any element, like ): WFM YMMV
You don't need the style="text-align:center" on your wrapper element
Why not? The goal is to center something with an unpredictable size.
display:block adapts to the container. display:table adapts to the contents.
This uses both.