I found it impossible to center elements inside all of the 3 `<td>`s in a single `<tr>` because of the strange behavior of vertical-align.

My whole table is a datepicker and I need to have it's 2 side buttons (arrows) and the text in the middle all vertically centered. I thought `vertical-align: middle` on each of the containing `<th>` would do the case, but the arrows are somehow dragged down on Firefox:

![Firefox datepicker](https://i.stack.imgur.com/kmsgG.png)

They are positioned well on Chrome:

![Chrome datepicker](https://i.stack.imgur.com/6Vsu0.png)

I tried to reconstruct the Firefox problem on a pen, but initially couldn't. Only after some fiddling did I found that weird behavior of `vertical-align` when the centered elements are small enough.

And so [this pen](http://codepen.io/anon/pen/QwxqjK) renders wrongly both on Firefox. Notice that this time I used `vertical-align: top` instead of `middle` as it better illustrate the problem. The black box should reach the sole top of the blue box, but for some reasons it doesn't until you increase it's height.

Here's screen from Firefox (where it touches the bottom instead of top!):

![Firefox pen](https://i.stack.imgur.com/mVjMf.png)

And Chrome, where it's more in the middle than on the top:

![Chrome pen](https://i.stack.imgur.com/ObUkv.png)

What's the reason of that behavior? How to align the elements properly in such case? I tried absolute positioning (giving `position: relative` to containing `<th>` and `position: absolute` to it's children elements), but I encountered a problem in IE calculating relative heights - I submitted the problem as [another question](https://stackoverflow.com/questions/28763820/table-cells-height-calculated-differenly-in-ie11/28765217?noredirect=1#comment45809862_28765217). I should add that all the sizes are variable/dynamic and so the layout can't depend on any fixed-size calculations, but must be fully responsive.