Alignment of text content of flex-stretched text element (H2)

Question

I have a container <article> container which is display: flex. It contains some <div> but also an <h2>.

The <article> has align-items: stretch so that items within the container appear as full-height, as shown below. How can I align the text of the H2 to the center while preserving the full-height appearance (without adding another container around it?)

Example HTML:

        body {
            font-family: Arial;
            font-size: 10pt;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body article {
            flex: 1;
            display: flex;
            align-items: stretch;
        }

        body article+article {
            border-top: solid 1px silver;
        }

        body article h2 {
            text-align: center;
            flex: 1;
            max-width: 16.6%;
            padding: 10px;
            margin: 10px;
            background-color: black;
            color: white;
        }

        body article section {
            flex: 1;
        }

    <article>
        <h2>Feature delivery</h2>
        <section class="G">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative"></div>
        </section>
        <section class="A">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
        <section class="R">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
        <section class="R">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
        <section class="A">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
    </article>
    <article>
        <h2>Optimisation and stability</h2>
        <section class="R">
            <h3>xxxx</h3>
            <div class="lead xxxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
    </article>
    <article>
        <h2>Team</h2>
    </article>

let me check if i understood it right: you want only the H2 of each article to be vertically and horizontally centered inside the black box without adding another container for the h2? — Warden330, Sep 24 '20 at 09:32
Simply turn your `h2` into a flex object: `display: flex; align-items: center; justify-content: center;`. — Amaury Hanser, Sep 24 '20 at 09:35
@AmauryHanser perfect! Can you answer below so I can mark as correct? — goofballLogic, Sep 25 '20 at 08:27
Actually it looks like @Warden330 answered it already below (although someone deleted it for some reason). I'll try to mark that as the answer — goofballLogic, Sep 25 '20 at 08:29
@goofballLogic i did because it got downvoted for some reason so i thought it must be either wrong or irrelevant — Warden330, Sep 25 '20 at 08:31

score 0 · Accepted Answer · answered Sep 24 '20 at 09:37

Like this when i understood you right?

body {
            font-family: Arial;
            font-size: 10pt;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body article {
            flex: 1;
            display: flex;
            align-items: stretch;
        }

        body article+article {
            border-top: solid 1px silver;
        }

        body article h2 {
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            flex: 1;
            max-width: 16.6%;
            padding: 10px;
            margin: 10px;
            background-color: black;
            color: white;
        }

        body article section {
            flex: 1;
        }

<head>
    <title>RAG status - Engineering</title>
</head>
<body>


    <article>
        <h2>Feature delivery</h2>
        <section class="G">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative"></div>
        </section>
        <section class="A">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
        <section class="R">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
        <section class="R">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
        <section class="A">
            <h3>xxx</h3>
            <div class="lead xxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
    </article>
    <article>
        <h2>Optimisation and stability</h2>
        <section class="R">
            <h3>xxxx</h3>
            <div class="lead xxxx"></div>
            <div class="narrative">
xxx
            </div>
        </section>
    </article>
    <article>
        <h2>Team</h2>
    </article>

Thanks. For some reason, I had conflated the element (h2) with its content (the text) and didn't think to treat it as having its own items within. — goofballLogic, Sep 25 '20 at 08:32

Alignment of text content of flex-stretched text element (H2)

1 Answers1