bootstrap中怎么样使按钮居中

迈不过友情╰ 2022-06-12 00:17 629阅读 0赞

总结一下以下几种方法：  
在bs中表现按钮的方法有两种：  
１.关于 <a> 元素  
　只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。

1.  <div class="btn-group btn-group-justified" role="group" aria-label="...">  
    
2.    　...  
    
3.  　</div>

复制代码

２.关于 <button> 元素  
　为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上，但是，由于我们支持按钮式下拉菜单，我们可以解决这个问题。

1.  <div class="btn-group btn-group-justified" role="group" aria-label="...">  
    
2.    <div class="btn-group" role="group">  
    
3.      <button type="button" class="btn btn-default">Left</button>  
    
4.    </div>  
    
5.    <div class="btn-group" role="group">  
    
6.      <button type="button" class="btn btn-default">Middle</button>  
    
7.    </div>  
    
8.    <div class="btn-group" role="group">  
    
9.      <button type="button" class="btn btn-default">Right</button>  
    
10.   </div>  
    
11. </div>

复制代码

在做项目的过程中遇到要将万恶的按钮居中，顿时脑袋空白了，margin又不能用，还要遵循框架，哎呀，问了下度娘，果然找到几种不错的方法，当然缘由还不是很明白，希望遇到哪个大神给详细讲下理论，好了，看下面的方法吧：  
  
１.block 没设定宽度是不能 margin auto 来居中的，一个简单的办法是 display: table；

1.  display: table  
    
2.  width: auto  
    
3.  margin-left: auto  
    
4.  margin-right: auto

复制代码

运行代码 复制代码 保存代码 提示：您可以先修改部分代码再运行! power by [W3Cfuns.com][]

２.很直接，用<center></center>

1.  <center><button type="button" class="btn btn-primary" >Primary</button></center>

复制代码

自己试验了一下不好用，文章不好找，先备份一下。

[W3Cfuns.com]: http://www.w3cfuns.com/