用CSS让按钮居中显示的思路

2014-04-08

  通过CSS让按钮居中显示,这里的width是个很重要的属性,因为按钮的宽度非常小,所以要设置一个合适的width值才可以让你的按钮居中显示。0sm七七世界-网站建设|UI设计|人资系统|二次开发

  效果如图:0sm七七世界-网站建设|UI设计|人资系统|二次开发

20140616101822.jpg0sm七七世界-网站建设|UI设计|人资系统|二次开发

  我们可以通过css来实现,代码如下:
     <div style="margin:0 auto;width:60px;">
     <input class="submit" id="btn" type="submit" value="注册"
     style="width: 60px;border: 1px solid #1BC286;padding: 5px;
     background: #70B88F;color: white;cursor: pointer;border-radius: 5px;"/>
     </div>0sm七七世界-网站建设|UI设计|人资系统|二次开发

  使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不同的值。0sm七七世界-网站建设|UI设计|人资系统|二次开发

  后面的那个width也是个很重要的属性,因为按钮的宽度非常小,所以要设置一个合适的width值才可以让你的按钮居中显示哦~0sm七七世界-网站建设|UI设计|人资系统|二次开发

  PS:我们可以设置div的宽度就是按钮的宽度,那么给div属性margin:0px auto; 此时按钮就居中显示了;或者我们不给div的width属性,给div设置text-align:center,此时,按钮也是居中显示的。
0sm七七世界-网站建设|UI设计|人资系统|二次开发

本文关键词:按钮  思路  宽度  属性