Comment by Aardwolf

2 months 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?

9 comments

Aardwolf

Reply
JimDabell  2 months 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/

_jzlw  2 months ago

align-content: center;

(supported on block elements since sometime last year)

  • Aardwolf  2 months ago

    Thanks, 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  2 months 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".