码迷,mamicode.com
首页 > 其他好文 > 详细

button居中

时间:2018-03-14 23:42:00      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:center   bottom   gpo   http   技术分享   居中   img   lock   宽度   

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

 

button居中

标签:center   bottom   gpo   http   技术分享   居中   img   lock   宽度   

原文地址:https://www.cnblogs.com/cherryshuang/p/8570629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!