← Back to context

Comment by Aardwolf

10 hours 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?

8 comments

Aardwolf

Reply
JimDabell  7 hours 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/

mubou2  9 hours ago

align-content: center;

(supported on block elements since sometime last year)

  • Aardwolf  6 hours 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."