css：中要素を外要素の中、縦に中央に配置したい。

リストで横ナビゲーションを作っているときに、中のテキスト要素（上の図でいうオレンジ部）が一行だったらpaddingで調整したりlight-heightとheightで調整したりと乗り切ってきましたが、今回はオレンジの部分がテキスト一行と二行のものが混じっているというものでした。

paddingで調整すると上のような不格好な感じになってしまいました。
でも、なんとかブロック要素として縦に中央（以下のように）にしたいということで以下のようなソースになりました。

ブロック要素はtableに。子要素で調整です。

.box-a{
    float: left;
    margin-right: -1px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 11.3%;
    line-height: 2.4;
    text-align: center;
    font-size:13px;
  display: table;  /* 垂直に真ん中 外 */
}
.box-a a{
    color: #222;
    background-color: #fff;
    max-height: 40px;
    padding: 4px;
     display: table-cell;   /* 垂直に真ん中 */
     vertical-align: middle;   /* 垂直に真ん中 */
}

①外ボックスに　display: table;
②中要素、今回はありンくのaを
display: table-cell;
vertical-align: middle; /* 垂直に真ん中 */にしました。

めでたしめでたし