首页 > 其他 > 详细

button居中

时间:2018-03-14 23:32:10      阅读:296      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!