5 ms·

What is the status quo on vertical alignment if I may ask..

evan_ 8y ago
Flex box https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ https://philipwalton.github.io/solved-by-flexbox/demos/verti...
- lisper 8y ago
  The code shown on that page actually doesn't work, though the code in the github repo does. And this exposes the problem with the current state of the art: yes, you can probably get flexbox to do what you want [@] if you know how. But if you don't know how, trying to figure it out is still very hard. You should be able to write: <center>stuff</center> or <vertical-center>stuff</vertical-center> There is really no reason that should not Just Work. (The <center> tag has worked for 20 years, notwithstanding that it has been deprecated for most of that time.) --- [@] What if I want to put something in the lower left or upper right hand corner?
  - rvense 8y ago
    You should not be centering things in HTML, that's the stylesheet's job.
    - lisper 8y ago
      I have no objection to having a style sheet that defines what the <center> tag does. But it should at least be possible to have a center tag and a vertical-center tag. AFAICT it is not possible. At the very least you need both a center-capable container and centered elements.
      - rvense 8y ago
        I don't think it should: You're always centering children with respect to something, and you specify the fact that you want children centered on the thing you're centering them in, rather than the elements themselves. This makes more sense, in my opinion, and as said in the sibling comment, it's two simple rules. I do a tonne of flexbox and grid in my day-to-day, and these complaints are quite simply out of date. Almost any layout in CSS these days can be done easily and intuitively.
        crimsonalucard 8y ago
        By out of date do you mean around 1 year old? I'm sorry but your statement will likely be out of date soon.
    - Dylan16807 8y ago
      Sure, what's the CSS to make a div be centered vertically?
      - niutech 8y ago
        display: flex; align-items: center;
        Dylan16807 8y ago
        Doesn't work unless you have an extra container div.
        smallnamespace 8y ago
        This is true, but every 'modern' DOM that I've seen has loads of extra container divs precisely to allow post hoc layout.
        Grumbledour 8y ago
        To be fair though, this has been a problem for quite some time and mostly stems from many web devs not understanding block and inline correctly and thus applying unneeded divs everywhere even there are enough hooks for their styles already.
        gedy 8y ago
        Sure, because "vertically centered" means relative to what?
        deleted 8y ago
        [deleted]
        Dylan16807 8y ago
        I want the contents of my div to be centered inside my div. Just like <center> works, but vertically. You don't need <foo><bar>content</bar></foo> for horizontal centering. I consider it a layering violation to have to do that nesting.
  - kowdermeister 8y ago
    > trying to figure it out is still very hard If you are learning CSS in 2018, then there is little chance that you didn't encounter flexbox and its capabilities. Nowadays there are many good, crossbrowser solutions for common problems, but I have to agree, intuition is not a feature of CSS.
  - howdydoo 8y ago
    https://codepen.io/anon/pen/NzQQJm https://codepen.io/anon/pen/NzQQJm This is a gross abuse of html, but if you really want that syntax, you can have it. I can't say I understand all the complaining here. You want to make $200K a year sitting at a desk, but learning flexbox or googling when you need it is too much effort?
    - lisper 8y ago
      Your code breaks the <center> tag: if you try to nest a <center> inside your <vertical-center> it doesn't work. And my complaint is that I believe that computing should be accessible to everyone, and that simple things should not be made difficult just so that an elite guild can command above-market wages to fix problems that they themselves created. I don't believe in broken-windows economics.
      - b2ccb2 8y ago
        Fixed: https://codepen.io/anon/pen/ZjzWzQ https://codepen.io/anon/pen/ZjzWzQ
        lisper 8y ago
        Cool, thanks!
      - talmand 8y ago
        Wait, front-end developers who use CSS created the problems of CSS? That's really funny. I mean, that's the most mind-blowing accusation I've heard in a long time. I would have to suggest you are commenting on a topic that you actually know very little about. But at least you are entertaining.
        lisper 8y ago
        Who do you think created CSS? CSS was not handed down on stone tablets by the gods, it was designed by humans, and I presume that at least some of the people who designed CSS actually used it (though to be honest I don't actually know who was on the committee). I don't know if it was their intent to make something Byzantine that served as an effective barrier to entry to doing front-end design, but that was in fact what they did.
  - evan_ 8y ago
    So should there also be a <rightalign> and a <leftalign> and a <topalign> and <bottomalign> and <spaceequally> and and and...? If you want to lower left align you set align-items and justify-content to flex-end and flex-start. For upper right, flip those. (if you’ve changed flex-direction those will need to shuffle around.) I seriously don't understand why having a different tag for every possible alignment would be somehow easier or more discoverable than just using css rules. Novices are going to have to be looking stuff up either way- I get the concern about discoverability but I strongly doubt anyone is just typing tags to see what works.
    - lisper 8y ago
      I would prefer halign=left/right/center/justify, valign=top/bottom/center. But yes.
dredmorbius 8y ago
Grid or flex.

Flex box https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ https://philipwalton.github.io/solved-by-flexbox/demos/verti...

lisper 8y ago
The code shown on that page actually doesn't work, though the code in the github repo does. And this exposes the problem with the current state of the art: yes, you can probably get flexbox to do what you want [@] if you know how. But if you don't know how, trying to figure it out is still very hard. You should be able to write: <center>stuff</center> or <vertical-center>stuff</vertical-center> There is really no reason that should not Just Work. (The <center> tag has worked for 20 years, notwithstanding that it has been deprecated for most of that time.) --- [@] What if I want to put something in the lower left or upper right hand corner?
- rvense 8y ago
  You should not be centering things in HTML, that's the stylesheet's job.
  - lisper 8y ago
    I have no objection to having a style sheet that defines what the <center> tag does. But it should at least be possible to have a center tag and a vertical-center tag. AFAICT it is not possible. At the very least you need both a center-capable container and centered elements.
    - rvense 8y ago
      I don't think it should: You're always centering children with respect to something, and you specify the fact that you want children centered on the thing you're centering them in, rather than the elements themselves. This makes more sense, in my opinion, and as said in the sibling comment, it's two simple rules. I do a tonne of flexbox and grid in my day-to-day, and these complaints are quite simply out of date. Almost any layout in CSS these days can be done easily and intuitively.
      - crimsonalucard 8y ago
        By out of date do you mean around 1 year old? I'm sorry but your statement will likely be out of date soon.
  - Dylan16807 8y ago
    Sure, what's the CSS to make a div be centered vertically?
    - niutech 8y ago
      display: flex; align-items: center;
      - Dylan16807 8y ago
        Doesn't work unless you have an extra container div.
        smallnamespace 8y ago
        This is true, but every 'modern' DOM that I've seen has loads of extra container divs precisely to allow post hoc layout.
        Grumbledour 8y ago
        To be fair though, this has been a problem for quite some time and mostly stems from many web devs not understanding block and inline correctly and thus applying unneeded divs everywhere even there are enough hooks for their styles already.
        gedy 8y ago
        Sure, because "vertically centered" means relative to what?
        deleted 8y ago
        [deleted]
        Dylan16807 8y ago
        I want the contents of my div to be centered inside my div. Just like <center> works, but vertically. You don't need <foo><bar>content</bar></foo> for horizontal centering. I consider it a layering violation to have to do that nesting.
- kowdermeister 8y ago
  > trying to figure it out is still very hard If you are learning CSS in 2018, then there is little chance that you didn't encounter flexbox and its capabilities. Nowadays there are many good, crossbrowser solutions for common problems, but I have to agree, intuition is not a feature of CSS.
- howdydoo 8y ago
  https://codepen.io/anon/pen/NzQQJm https://codepen.io/anon/pen/NzQQJm This is a gross abuse of html, but if you really want that syntax, you can have it. I can't say I understand all the complaining here. You want to make $200K a year sitting at a desk, but learning flexbox or googling when you need it is too much effort?
  - lisper 8y ago
    Your code breaks the <center> tag: if you try to nest a <center> inside your <vertical-center> it doesn't work. And my complaint is that I believe that computing should be accessible to everyone, and that simple things should not be made difficult just so that an elite guild can command above-market wages to fix problems that they themselves created. I don't believe in broken-windows economics.
    - b2ccb2 8y ago
      Fixed: https://codepen.io/anon/pen/ZjzWzQ https://codepen.io/anon/pen/ZjzWzQ
      - lisper 8y ago
        Cool, thanks!
    - talmand 8y ago
      Wait, front-end developers who use CSS created the problems of CSS? That's really funny. I mean, that's the most mind-blowing accusation I've heard in a long time. I would have to suggest you are commenting on a topic that you actually know very little about. But at least you are entertaining.
      - lisper 8y ago
        Who do you think created CSS? CSS was not handed down on stone tablets by the gods, it was designed by humans, and I presume that at least some of the people who designed CSS actually used it (though to be honest I don't actually know who was on the committee). I don't know if it was their intent to make something Byzantine that served as an effective barrier to entry to doing front-end design, but that was in fact what they did.
- evan_ 8y ago
  So should there also be a <rightalign> and a <leftalign> and a <topalign> and <bottomalign> and <spaceequally> and and and...? If you want to lower left align you set align-items and justify-content to flex-end and flex-start. For upper right, flip those. (if you’ve changed flex-direction those will need to shuffle around.) I seriously don't understand why having a different tag for every possible alignment would be somehow easier or more discoverable than just using css rules. Novices are going to have to be looking stuff up either way- I get the concern about discoverability but I strongly doubt anyone is just typing tags to see what works.
  - lisper 8y ago
    I would prefer halign=left/right/center/justify, valign=top/bottom/center. But yes.

dredmorbius 8y ago

Grid or flex.