5 ms·
Can it already vertically and horizontally center unknown-beforehand-length multi-line text in a single html element, just like non-CSS table cells could alread
by Aardwolf 10mo ago
Can it already vertically and horizontally center unknown-beforehand-length multi-line text in a single html element, just like non-CSS table cells could already in 1995?
- _jzlw 10mo agoalign-content: center; (supported on block elements since sometime last year)
- Aardwolf 10mo agoThanks, seems to work at first sight in combination with text-align for the horizontal alignment! That means I may finally not need line-height or multi-element tricks for this anymore Interesting that this is finally there since a year! I wonder what made them decide to support it finally, since CSS's creation in 1996. A button never looks professional if the text in it isn't centered, this was a really needed feature and I still can't understand why it took that long Edit: it does seem worrying that for me this property vertically centers but not horizontally while the description of it doesn't say vertical but is: "The items are packed flush to each other in the center of the alignment container along the cross axis."
- _jzlw 10mo ago> The items are packed flush to each other in the center of the alignment container along the cross axis You're right, the entire Values section seems to still be worded exclusively for flexboxes. The description at the top adds "or a grid or block-level element's block axis".
- JimDabell 10mo ago> Can it already vertically and horizontally center unknown-beforehand-length multi-line text in a single html element, just like non-CSS table cells could already in 1995? Non-CSS table cells have never been able to do that – you need a wrapping <table> at minimum for browsers to render it how you want, a <tr> for it to be valid HTML, and <tbody> comes along for the ride as well as an implied element. So that’s four elements if you want to centre vertically with <td> or <th>. If you wait until the year 2000, then you can get that down to three elements by switching from HTML to XHTML because <tbody> is no longer implied in XHTML. CSS, on the other hand, has been able to do what you want since 1998 (CSS 2) with only two elements: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <title>.</title> <style type="text/css"> html, body { height: 100%; } .outer { display: table; width: 100%; height: 100%; } .inner { display: table-cell; vertical-align: middle; text-align: center; } </style> <div class="outer"> <div class="inner"> Test<br> Test<br> Test<br> Test<br> Test<br> Test </div> </div> (I’m using a <style> element here for clarity, but you can do the same thing with style attributes.) https://www.w3.org/TR/1998/REC-CSS2-19980512/ https://www.w3.org/TR/1998/REC-CSS2-19980512/
- 1718627440 10mo agowidth: fit-content; margin: auto;
- Aardwolf 10mo agoThat changes the width, I guess I should have specified fixed width
- 1718627440 10mo agoWhat is a fixed with, that is not a has not a fix value?
- Aardwolf 10mo agoI mean elements with a width set in pixels, ems or some other unit. Setting width to 'fit-content' would override the width you set and then the element may overlap others to the right of it
- 1718627440 10mo agoThen you just do width: <width in ems> em; ? I thought you didn't want to specify a width.