5 ms·

CSS has several long-standing problems in a similar vein to this one, most famous being the “center a div” problem. A simple-to-specify end result (“I just want

by fwlr 4y ago

CSS has several long-standing problems in a similar vein to this one, most famous being the “center a div” problem. A simple-to-specify end result (“I just want to center this content within its parent”) is desired, a series of arcane CSS magic invocations are devised and become accepted as the standard invocation to solve the problem (usually using translateX/Y -50%), and eventually a series of formal and more general solutions are implemented in the CSS spec that solve the problem in progressively fewer lines of CSS (first “display: flex; align-items: center; justify-content: center;”, now we are down to “place-self: center;”). It’s good to see that the problem of anchoring tooltips is progressing through this process!

AndroidKitKat 4y ago
Never heard of place-self before! I've always resorted to fumbling around with flexbox froggy and wondering why the changes I make to froggy seemingly don't do the same thing to my simple HTML.
- werdnapk 4y ago
  First I've heard of place-self as well. I see it's been available for quite some time. I've always used the "longhand" version instead of this shorthand property. Good to know.
- Erem 4y ago
  Laughing in bed because I always assumed I was the only one using froggy as my flexbox reference material. The worst is when you get angry and start blaming the frog for its lies. As if it's the frog's fault...
xnx 4y ago
Every few years I have to look up what the current state of the art is for centering something in CSS. I've so often been shocked that there still wasn't something as simple as <center>. Similarly, I couldn't believe how long it's taken to get something as useful as tables for layout.
- fwlr 4y ago
  I also used to be annoyed by how long it took to get “basic useful functionality” for some use case in CSS. Over the years I have mellowed as I recognized it simply takes a long time to converge on what functionality is actually desired, and then what systems need to be in place so you can request that functionality in the most obvious location in your code (e.g. it turns out we really want to put the request for centering on the element to be centered, not the parent) along with figuring out the truly minimal, truly necessary information to carry out that functionality — and then further still to implement those needed systems in all major browsers. It’s just a long and incremental process by its nature and we probably can’t do much better than that. Ironically, the fact that the state of the art changes every few years is evidence that this process, though slow, does work reliably well.
- eurasiantiger 4y ago
  <center> is effectively <div style=”text-align: center;”> <span>centered element</span> </div>
  - c-smile 4y ago
    Not so easy, at least: <span style="display:inline-block">centered element</span> But in general <center> still cannot be 100% expressed by CSS means.
    - deleted 4y ago
      [deleted]
- bazoom42 4y ago
  <center> just centered text horizontally. This have been supported by CSS from the beginning. The CSS property display:table gives you the same layout power as tables.
DaiPlusPlus 4y ago
> now we are down to “place-self: center;” `place-self` still requires the parent to be a flex-box container, though. You can't just apply it to an arbitrary element to make it center in its parent. `place-self` is just shorthand for setting both `align-self` and `justify-self` in a single proeprty - I don't see how this is necessarily an improvement: CSS is already (unfortunately, necessarily) confusing at it is, so adding a literally redundant CSS property with a distinct name is not going to reduce confusion nor make CSS any more accessible. CSS's shorthand properties work best when the shorthand version actually aids comprehension, rather than making you think: for example, `border: <width> <style> <color>;` and `margin: <top> <right> <bottom> <left>;` are great examples of how they should be: either because each parameter is unambiguously typed (in `border`'s case: widths, border-style and colors are very distinct) or uniformly-typed but follow a familiar pattern (e.g. `margin:`'s parameters are all length-values but are in a clockwise sequence) - this is not something we see in some of the more modern shorthand properties like `flex` and `box-shadow` where you need to have pre-memorized which parameter corresponds to each longhand property, e.g. it's non-obvious that the `2` in `flex: 1 2 3px` is for `flex-grow` - or that the `3px` in `box-shadow: 1px 2px 3px 4px rgba(0,0,0,0.2);` is for `blur-radius` and not `spread-radius`. > It’s good to see that the problem of anchoring tooltips is progressing through this process! I'm also strongly in favour of this CSS feature, it's a long-time coming - BUUUUT I also really would have liked some browser-native tooltip/title feature that allows for rich-content without resorting to hacks like `foo[title]::after { position: absolute; content: attr(title); etc }`
- nailer 4y ago
  > You can't just apply it to an arbitrary element to make it center in its parent. You can with grid-first. With the proviso that third party components may not work (which is fine, third party components are usually very low quality). I'd recommend, right after your existing: *, *:before, *:after { box-sizing: border-box; } Adding: div { display: grid; } You can now remove: - all margins (there's just padding and gap now) - margin auto centering hacks - clearfix hacks - translateY -50% hacks - a billion wrappers around every UI element (per all those low quality third party components, particularly common in the react space which seems to have a culture of "add divs until it looks right") plus a bunch of other code. In 99% of cases, using grid-first, there will be a 1:1 match of element to UI - getting around the div-soup of older web apps. The app I'm developing now is 1:1 with the exception of rounded gradient borders, which still needs a hack.
LoganDark 4y ago
With display:flex on the parent you can just put margin:auto on the child. That's what I do and it works fine. Although I admit to having used the transform trick more than a few times before flexbox was a thing.
martin_a 4y ago
Whaaaaaat? I thought > margin: 0 auto; would be the way to go for centering divs...
- lelandfe 4y ago
  https://jsfiddle.net/c7gt4or2/2/ https://jsfiddle.net/c7gt4or2/2/ No luck for elements of unspecified widths, or for inline elements.
  - martin_a 4y ago
    Ah yes, but that's what container-divs are for, am I right?! ;-)
rad_gruchalski 4y ago
> most famous being the “center a div” problem It's crazy how many attempts at this have been done over the years. And it worked great in Adobe Flex, back in 2009.
6510 4y ago
Mt secret is to use <center> but I cant remember how many times I've considered using js and absolute positioning. The user clicks an image, the image is enlarged to fit the viewport, remaining space is filled with a color. Doable with css. The user zooms the image (scale), so far so good... the user pans the image... uhh how do I limit panning in css? bounding rectangle + get computered style??
- lelandfe 4y ago
  Pan by adding a wrapping element with ‘overflow: hidden’ and use ‘translate’ to move the child image element inside it.
  - 6510 4y ago
    That sure saved me a lot of time making something ugly that shouldn't exist. Thanks!
c-smile 4y ago
If we would have flex units instead of display:flexbox then this: div { width:max-content; margin:*; } is enough to place block in the middle of its container (vertically and horizontally), see: https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/ https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...

by fwlr 4y ago

AndroidKitKat 4y ago

Never heard of place-self before! I've always resorted to fumbling around with flexbox froggy and wondering why the changes I make to froggy seemingly don't do the same thing to my simple HTML.

werdnapk 4y ago
First I've heard of place-self as well. I see it's been available for quite some time. I've always used the "longhand" version instead of this shorthand property. Good to know.
Erem 4y ago
Laughing in bed because I always assumed I was the only one using froggy as my flexbox reference material. The worst is when you get angry and start blaming the frog for its lies. As if it's the frog's fault...

xnx 4y ago

Every few years I have to look up what the current state of the art is for centering something in CSS. I've so often been shocked that there still wasn't something as simple as <center>. Similarly, I couldn't believe how long it's taken to get something as useful as tables for layout.

fwlr 4y ago
I also used to be annoyed by how long it took to get “basic useful functionality” for some use case in CSS. Over the years I have mellowed as I recognized it simply takes a long time to converge on what functionality is actually desired, and then what systems need to be in place so you can request that functionality in the most obvious location in your code (e.g. it turns out we really want to put the request for centering on the element to be centered, not the parent) along with figuring out the truly minimal, truly necessary information to carry out that functionality — and then further still to implement those needed systems in all major browsers. It’s just a long and incremental process by its nature and we probably can’t do much better than that. Ironically, the fact that the state of the art changes every few years is evidence that this process, though slow, does work reliably well.
eurasiantiger 4y ago
<center> is effectively <div style=”text-align: center;”> <span>centered element</span> </div>
- c-smile 4y ago
  Not so easy, at least: <span style="display:inline-block">centered element</span> But in general <center> still cannot be 100% expressed by CSS means.
  - deleted 4y ago
    [deleted]
bazoom42 4y ago
<center> just centered text horizontally. This have been supported by CSS from the beginning. The CSS property display:table gives you the same layout power as tables.

DaiPlusPlus 4y ago

> now we are down to “place-self: center;” `place-self` still requires the parent to be a flex-box container, though. You can't just apply it to an arbitrary element to make it center in its parent. `place-self` is just shorthand for setting both `align-self` and `justify-self` in a single proeprty - I don't see how this is necessarily an improvement: CSS is already (unfortunately, necessarily) confusing at it is, so adding a literally redundant CSS property with a distinct name is not going to reduce confusion nor make CSS any more accessible. CSS's shorthand properties work best when the shorthand version actually aids comprehension, rather than making you think: for example, `border: <width> <style> <color>;` and `margin: <top> <right> <bottom> <left>;` are great examples of how they should be: either because each parameter is unambiguously typed (in `border`'s case: widths, border-style and colors are very distinct) or uniformly-typed but follow a familiar pattern (e.g. `margin:`'s parameters are all length-values but are in a clockwise sequence) - this is not something we see in some of the more modern shorthand properties like `flex` and `box-shadow` where you need to have pre-memorized which parameter corresponds to each longhand property, e.g. it's non-obvious that the `2` in `flex: 1 2 3px` is for `flex-grow` - or that the `3px` in `box-shadow: 1px 2px 3px 4px rgba(0,0,0,0.2);` is for `blur-radius` and not `spread-radius`. > It’s good to see that the problem of anchoring tooltips is progressing through this process! I'm also strongly in favour of this CSS feature, it's a long-time coming - BUUUUT I also really would have liked some browser-native tooltip/title feature that allows for rich-content without resorting to hacks like `foo[title]::after { position: absolute; content: attr(title); etc }`

nailer 4y ago
> You can't just apply it to an arbitrary element to make it center in its parent. You can with grid-first. With the proviso that third party components may not work (which is fine, third party components are usually very low quality). I'd recommend, right after your existing: *, *:before, *:after { box-sizing: border-box; } Adding: div { display: grid; } You can now remove: - all margins (there's just padding and gap now) - margin auto centering hacks - clearfix hacks - translateY -50% hacks - a billion wrappers around every UI element (per all those low quality third party components, particularly common in the react space which seems to have a culture of "add divs until it looks right") plus a bunch of other code. In 99% of cases, using grid-first, there will be a 1:1 match of element to UI - getting around the div-soup of older web apps. The app I'm developing now is 1:1 with the exception of rounded gradient borders, which still needs a hack.

LoganDark 4y ago

With display:flex on the parent you can just put margin:auto on the child. That's what I do and it works fine. Although I admit to having used the transform trick more than a few times before flexbox was a thing.

martin_a 4y ago

Whaaaaaat? I thought > margin: 0 auto; would be the way to go for centering divs...

lelandfe 4y ago
https://jsfiddle.net/c7gt4or2/2/ https://jsfiddle.net/c7gt4or2/2/ No luck for elements of unspecified widths, or for inline elements.
- martin_a 4y ago
  Ah yes, but that's what container-divs are for, am I right?! ;-)

rad_gruchalski 4y ago

> most famous being the “center a div” problem It's crazy how many attempts at this have been done over the years. And it worked great in Adobe Flex, back in 2009.

6510 4y ago

Mt secret is to use <center> but I cant remember how many times I've considered using js and absolute positioning. The user clicks an image, the image is enlarged to fit the viewport, remaining space is filled with a color. Doable with css. The user zooms the image (scale), so far so good... the user pans the image... uhh how do I limit panning in css? bounding rectangle + get computered style??

lelandfe 4y ago
Pan by adding a wrapping element with ‘overflow: hidden’ and use ‘translate’ to move the child image element inside it.
- 6510 4y ago
  That sure saved me a lot of time making something ugly that shouldn't exist. Thanks!

c-smile 4y ago

If we would have flex units instead of display:flexbox then this: div { width:max-content; margin:*; } is enough to place block in the middle of its container (vertically and horizontally), see: https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/ https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...