Vertical align h2 in div

Question

Ok, I've got the following HTML structure

<div class="category">
    <div class="container bottom">
        <h2>Name1</h2>
    </div>
    <div class="container top">
        <h2>Name2</h2>
    </div>
    <div class="container ">
        <h2>Name3</h2>
    </div>
    <div class="container">
        <h2>Name4</h2>
    </div>
    <div class="container">
        <h2>Name5</h2>
    </div>
    <div class="container">
        <h2>Name6</h2>
    </div>
    <div class="container">
        <h2>Name7</h2>
    </div>
</div>

The CSS is this:

* {
    margin: 0;
    padding: 0;
}

.category {
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

.container {
    display: inline-block;
    width: 33%;
    height: 4em;
}

h2 {
    display: inline-block;
    width: 100%;
}

.left > * {
    text-align: left;
}

.right > *{
    text-align: right;
}

.top > * {
    vertical-align: top;
}

.bottom > * {
    vertical-align: bottom;
}

The main goal is to do something like this: Example

For the sake of it, pretend the picture is accurate and the .container (gray boxes) have the same size (as you can see in the CSS)

My problem is the vertical-align is not working.. I've looked into this CodePen Code that works without display: table-cell and other table-display-related solutions I've found out in StackOverflow. Why doesn't it work with my HTML and CSS code? I get all the <h2> align in the middle :\

Answer 1

In the Codepen example it's not actually the h2 is vertically aligned in the box. It's the alignment of elements next to each other, not the elements in the container. It's a bit confusing. Having one inline element won't work but if you had two you would see them vertically align with each other. However when using a table cell this functionality changes.

Try removing the images from the Codepen example and then putting a height on the div. You'll see that it stops being vertically aligned.

I would align with display:table and display:table-cell. It will work using the position:absolute approach but if the text expands out of the box you will have layout issues as the text isn't in the document flow anymore. By setting them as tables you keep a bit of flexibility.