html - Vertical align h2 in div -

ok, i've got 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 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 this: example

for sake of it, pretend picture accurate , .container (gray boxes) have same size (as can see in css)

my problem vertical-align not working.. i've looked codepen code works without display: table-cell , other table-display-related solutions i've found out in stackoverflow. why doesn't work html , css code? <h2> align in middle :\

in codepen example it's not h2 vertically aligned in box. it's alignment of elements next each other, not elements in container. it's bit confusing. having 1 inline element won't work if had 2 see them vertically align each other. when using table cell functionality changes.

try removing images codepen example , putting height on div. you'll see stops being vertically aligned.

i align display:table , display:table-cell. work using position:absolute approach if text expands out of box have layout issues text isn't in document flow anymore. setting them tables keep bit of flexibility.