How to Center in CSS (2015)(howtocenterincss.com) |
How to Center in CSS (2015)(howtocenterincss.com) |
However, there are still couple of common tasks that are pain/hard/impossible to do with just CSS.
Recently I learned that after all this years you still need to use JS to get css animation for dynamic height ("height:auto") of elements.
And there is no progress in fixing it at CSS standard level. It's just sad... https://github.com/w3c/csswg-drafts/issues/626 https://stackoverflow.com/questions/3508605/how-can-i-transi... https://stackoverflow.com/questions/3508605/how-can-i-transi...
Edit: Oh, I just saw that the stackoverflow question you linked has this for the accepted answer :)
.in-the-middle {
width:max-content;
height:auto;
margin:*; // "coils" on all sides moving it
// to the middle of free space in container
}
Here is the story: https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...
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.
Today you can simply use flexbox on the container:
display: flex;
justify-content: center; // horizontal
align-items: center; // vertical
> Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors.
Which is no longer true in the great majority of cases.
This works in IE without a JavaScript polyfill (lol): <html> <body> <div style="width: 400px; height: 400px; background: red; display: flex; align-items: center; justify-content: center;"> <div>TESTING</div> </div> </body> </html>
div { position: absolute; right: 50%; bottom: 50% transform: translate(50%, 50%); }
<div id="wrapper" style="text-align:center"> <div id="wrapped" style="display:table;margin-left:auto;margin-right:auto;text-align:left"></div> </div>
WFM YMMV
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.
<div class=element></div>
<style>
.element{
position:absolute;
width:500px;
height:500px;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
}
</style>"What do you mean centering was hard?"
"Not was, still is."
"..."
"yeah. ..."
I wouldn’t recommend using it for big or professional projects, but I guess it’s fine for personal stuff. Like the other comment said it’s an obsolete tag. Browsers tend try hard not to break old HTML but not sure that’s guaranteed to always be the case.
<center>
Text
</center>
<div>
Text
</div>
.v-h-center { display: grid; place-content: center; }
The <center> element is obsolete and is not in the HTML5 spec...
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.
Also, this site seems to have gone up in 2015 and hasn't changed (substantially) since.
I also don't think you're correct in calling this a straw man. This is not a debate and there was no other party whose assertion this site seems to refute, so calling it a straw man doesn't seem to fit.
[1] https://philipwalton.github.io/solved-by-flexbox/demos/verti... [2] https://github.com/philipwalton/flexbugs
Most of the flexbugs are now fixed and flex should be recommended way of making layouts.
You’re right of cause and centering is styling and it doesn’t belong in the html. It just that sometimes I really can’t be bothered with css and the center hr and a ton of br slips in, and it works well enough.
> The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
and
> The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
Cool. Thanks!