前端中如何使span中的文字居中

Question

如题所述

Answer 1

要想居中，首先得有宽度；

而span是inline，给width是不起作用的；要想起作用，得先让span变成inline-block；

span{display:inline-block;width:100px;text-align:center;}

设置文字居中显示的三句代码

middle-box{display:table;height:300px;border:1pxsolid#ff0000;width:400px;margin:0auto;position:relative;}

middle-inner{display:table-cell;vertical-align:middle;*position:absolute;*top:50%;*left:50%;width:100%;text-align:center;}//用了css的hack，对ie6,ie7的兼容

middle-innerp{position:relative;*top:-50%;*left:-50%;}