css里面设置按钮（button）让字体居中

题目：设置button中的字体让其居中，不至于溢出(字体下落，重影等问题)

1，抛出问题，如图所示
2，引出我的代码

<view class="loginBtn">
            <form action="check.jsp" method="get">
                <button class="btnValue" type="submit">登录</button>
            </form>
        </view>
```图2,登录按钮的整体思想

css区域的代码
.loginBtn{
        width: 750rpx;
        height: 100rpx;
        background-color: #3D87FF;
    }
  图3，这里是按钮的整体布局，

再来看登陆这两个子的布局
  // 登录这两个字眼的布局
    .btnValue{
        width: 176rpx;
        height: 44rpx;
        background-color: #3D87FF;
        text-align: center;
        border: none;
    }

3，找出问题

问题在于我设置的总高度100rpx是有了，但是登录这两个子的高度要设置行高，行高，行高。重要的事情说三遍！，不是单纯的设置一个height就完事了！根据这个问题设置line-height,即可迎刃而解。
如图所示

抛出代码

如图所示，配置成line-height属性即可生效。

总结

1，先配置整体的按钮高度，
2，配置字体的高度，重点是
（1），字体的高度低于总体设置的高度
（2），这里的字体高度用的是line-height,line-height,line-height,*(重要的事情说三遍)***而不是height。