button居中

Posted 2020-10-27 shuangcherry

碰到一种情况，如下图所示：即需要button居中，但是外面屏幕的宽度是不固定的。

看着很简单，我最初想要直接让button宽度为100%，然后margin:10px 10px 却行不通，最后，我的解决方法是需要在外面包裹一层div，通过div的padding来实现居中。

1 <div class="btn-box">
2         <button class="btn btn-top" >我要招人</button>
3         <button class="btn btn-bottom" ui-sref="main">我要找工作</button>
4 </div>

css样式：

 1 .btn{
 2   width:100%;
 3   height:1.2rem;
 4   line-height:1.2rem;
 5   background: #12d5b5;
 6   color:#fff;
 7   border:0;
 8   text-align:center;
 9   display:block;
10   font-size:0.5rem;
11   letter-spacing: 3px;
12   border-radius:5px;
13   opacity:0.7;
14 }
15 .btn-bottom{
16   margin-top:40px;
17 }
18 .btn-box{
19   text-align:center;
20   padding:240px 20px 0px 20px;
21 }