########################
font-size:16px;
line-height:1;
vertical-align:-18%;
########################

Magic number seems to be -18%
If it were -17%, then ,in Meiryo(IE), test goes above the middle.
If it were -19%, then ,in Hiragino(OSX), text goes below the middle.

########################
font-size:10px;
line-height:1;
vertical-align:-24%;
########################
font-sizeが10pxの場合小さくなった場合、-24%あたりがいい値だが、
あまり位置が変化しないので-24%が一番いい値がどうかは決定できない。

########################
(parent's padding top and bottom are 2px)
font-size:10px;
line-height:1;
vertical-align:-0.22em;
########################
-0.22em の値はparentのpadding-top and padding-bottomに
よって調整しなければならない。

===============================================================
以下の組み合わせはかなりうまくいく。

########################
font-size:13px
line-height:1;
vertical-align:-0.1em;
########################

/*-- flair --*/
.doc-flair {
	display:inline-block;
	margin-bottom:5px;
	padding:0 5px;
	color:#fff;
	background-color:#4689ce;
	font-weight:bold;
	font-size:13px;
	border-radius:3px;
}
.doc-flair-txt {
	line-height:1;
	vertical-align:-0.1em;
}

===============================================================
全てのブラウザで、ボタン内のストリングを正確にvertical=middleするには難しい。
特に、ボタンの高さが低い場合、文字列が、ブラウザによって、上か下にずれてしまうことがある。

下にひとつの解決策を示す
ポイント:
	aiin-btnに「line-height:0;」がある。
	aiin-tcellの line-height で高さを指定する。
	その高さはaiin-iconの高さと同じである。
	aiin-vcntで「top:1px」で調整することはやめる。
--------------------------------------------------------------
/* btn */
.%css-ctar% .aiin-btn {
	line-height:0;
}
/* tcell */
.%css-ctar% .aiin-tcell {
	display:table-cell;
	vertical-align:middle;
	line-height:16px;
}
/* vcnt */
.%css-ctar% .aiin-vcnt {
	position:relative;
	font-family:"Verdana","Arial";
	font-size:13px;
	color:#333;
}
/* icon */
.%css-ctar% .aiin-icon {
	position:relative;
	width:16px;
	height:16px;
	background:url("%url-tpl%img/icon.png");
	background-size:100% 100%;
}
--------------------------------------------------------------