按钮字体居中

当按钮使用了letter-spacing进行字间距设置，字会向左边偏移

!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        body,html{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        .btn{
            border:0px;
            width:10rem;
            height:2rem;
            background-color:blue;
            letter-spacing:2rem;
            text-align: center;
        }
    </style>
   </head>
   <body>
        <input type="button" class="btn" value="登录">
   </body>
</html>

效果如下：

解决办法：

       .btn{
            border:0px;
            width:10rem;
            height:2rem;
            background-color:blue;
            letter-spacing:2rem;
            text-align: center;
            text-indent:2rem;//首行缩进或者padding-left:2rem
        }

效果如下：

 

posted @ 2016-08-29 17:45  暗夜心慌方  阅读(2359)  评论(0)    收藏  举报