碰到一种情况,如下图所示:即需要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 }