下の図の赤い部分（スパン）のテキストを垂直方向の中央に配置するにはどうすればよいですか？ソースコードは以下の通り、画像は2階_html/css_WEB-ITnose

6413d169c5a025b1dbf400c72232b3a1 ;5bde0a482d05721df24713ccf3b8d576

33a0a1d733f7365d2fc34d1c123185c5中国54bdf357c58b8a65c66d7c19c8e4d114

85b53858d87c8bd0576b5c809c8383a7米国54bdf357c58b8a65c66d7c19c8e4d114

d61eadddc86ab6bcaccf1ee1d3285160c7d9231ea789f7400fe44a0b2cad60cc 54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68

注: スパンの行の高さは div と同じ高さに設定されています。赤い部分がまだまっすぐに中心に合わせられないので、アドバイスをお願いします。どうもありがとうございます！

ディスカッションへの返信(解決策)

垂直整列セット?

注: スパンの line-height 属性を div と同じ高さに設定しましたが、赤い部分 (スパン) のテキストを赤い部分に対して垂直方向に中央揃えにすることはできません。アドバイス！どうもありがとうございます！

<div id="divMain"  style="width:100%;height:25px; border:solid 1px #000000; text-align:center;" ><span style="float: left;"><国家名称</span>   	 <span class="spanChina" style="width:104px;background:#FF0000; padding-bottom:5px; margin-right:-2px;line-height:25px;" ><span style="vertical-align: middle;">中国</span></span>    	<span class="spanAmeran" style="width:104px;background:#FF0000;padding-bottom:5px; margin-left:-2px;line-height:25px;"><span style="vertical-align: middle;">美国</span></span>  	 <span style="float:right;"><img  id="imgClose" src="../../../img/closePage.png" /> </span></div>

...display:inline-block;vertical-align:middle; をスタイルに追加します