文字两端居中解决方案

     在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。遇到这种情况一般会用左右浮动，虽然可以实现效果但是感觉很low~如果你细心发现你会记得关于文字对齐有一个样式是text-align： text-justify当时可能你是因为浏览器不兼容而没用，现在我给大家讲一下兼容浏览器的写法：

p { width:200px; border:1px solid #ddd; font-size:12px; line-height:30px; overflow: hidden;} 
p span{ display:inline-block; float:left; width: 150px; text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ 
        text-align-last:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
   p span:after{  content:".";  display: inline-block;  width:100%;  overflow:hidden;  height:0;}
    }


<p><span>地址</span>：</p>
<p><span>邮箱地址</span>：</p>
<p><span>地址</span>：</p>

 

有人会纳闷为什么还用媒体查询了，没办法，谷歌就是会有bug只有这样才能解决。就像其他人用空的span一样