How to center the text in the red part (span) in the vertical direction relative to the red part in the picture below? The source code is as follows, the picture is on the second floor_html/css_WEB-ITnose

China

  United States

Note: I set the line-height of span familiarly It has become the same height as the div. However, the text in the red part (span) still cannot be centered vertically relative to the red part. Please give me some advice! Thank you very much!

Reply to discussion (solution)

vertical-align is set ?

Note: I set the line-height attribute of the span to be the same height as the div. However, the text in the red part (span) still cannot be centered vertically relative to the red part. Please Expert advice! Thank you very much!

<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>

...Add display:inline-block;vertical-align:middle;