Home > Article > Web Front-end > 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
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
- WBOYOriginal
- 2016-06-24 11:55:491107browse
2ef9481927b712d10174e63376db70b3
ef36b3357bb889eaf664149f4c1133a6fe46fba45153d3245d7c76b57c77e7bd
c4738f76a954839acea8ee5665fbbb5aChina54bdf357c58b8a65c66d7c19c8e4d114
1160c0110c25e53bc91d7ef587033274United States54bdf357c58b8a65c66d7c19c8e4d114
d61eadddc86ab6bcaccf1ee1d328516084722b5f7ce08c9e1f4c6e0bf3794ae5 54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
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;