中央に配置させたい要素の属性により記述方法が異なるので注意が必要。
インライン属性
aタグなどのインライン属性に対しては、通常、
vertical-align: middle
が使える。
ブロック属性
liタグなどのブロック属性に対しては、通常、
-webkit-box-align: center; /* safari, Chrome対応 */
-moz-box-align: center; /* Firefox対応 */
-o-box-align: center; /* Opera対応 */
-ms-box-align: center; /* IE対応 */
box-align: center; /* ベンダープレフィックス無しも併記する */
が使える。
liタグの中にaタグがある場合（←本題）
これには手間取った。
- liタグ：ブロック属性
- aタグ：インライン属性
であり、どうやらブロック属性の中にインライン属性があるときそのままだと縦位置中央揃えができないらしい。
結論、以下のような操作をすることで縦位置中央にすることができた。
まず、li要素（ブロック属性）をボックス属性に変換
li {
display: -webkit-box; /* safari, Chrome */
display: -moz-box; /* Firefox */
display: -o-box; /* Opera */
display: -ms-box; /* IE */
display: box; /* ベンダープレフィックスなし */
↓
次に、a要素（インライン要素）をブロック要素に変換
a {
display: block;
}
↓
最後に、liの中のa要素（ブロック要素）を縦位置中央揃え
li {
-webkit-box-align: center; /* safari, Chrome */
-moz-box-align: center; /* Firefox */
-o-box-align: center; /* Opera */
-ms-box-align: center; /* IE */
box-align: center; /* ベンダープレフィックスなし */
}
これで、目的のa要素がli要素の中で縦位置中央に配置された。
おまけ（隣接セレクタ）
liタグの中にaタグが2個あるとき、
a {
display: block;
}
とすると、2個のaタグいずれにもcssの内容が適用されてしまう。
後半のaタグにのみcssを適用させたい時は、
a+a {
display: block;
}
とすることで、後半のaタグのみにcssを適用させることができる。
詳しくは「CSS 隣接セレクタ」で検索！