按钮居中

Posted 2020-07-05 背对太阳的向日葵

　　近期做移动端项目，某一个页面内每个模块都有按钮，按钮大小一样，离底部距离一样，于是写了公共样式，在这里遇到个问题——居中，因为有时候是2个按钮，有时候是一个，整体宽度不一致，于是用了最基本的方法，给最外层position:fixed;bottom:20px;left:50%;margin-left:-容器宽度的一半。这样问题是解决了，但是不怎么灵活，宽度改变了我的margin-left值就要变，很繁琐。

　　后来经尝试+朋友指点，终于得以解决，具体如下：

　　html代码：

1 <div class="ui_Btn">
2     <div>跳过</div>
3     <div>配置wifi</div>
4 </div>

　　CSS代码：

 .ui_Btn {width: 100%;text-align: center;position: fixed;bottom: 10%;left:0;}
 .ui_Btn div {width: 120px;height: 40px;line-height: 40px;text-align: center;border-radius: 10px;
        display: inline-block;border: 1px solid #26AD60; background: #26AD60;color: #fff;}

　　

这个方式针对固定在底部的按钮比较适用，如果是文档中的按钮，取消position，bottom，left即可。只是其中的道理还不明白，望各路大神指点。