如何在中心对齐按钮组？ html css [重复]

Posted 2023-03-05

【中文标题】如何在中心对齐按钮组？ html css [重复]

【英文标题】：How to align button group in the centre? Html css [duplicate]

【发布时间】：2017-08-20 01:17:38

【问题描述】：

我在一个组中有两个按钮，我想在标题下对齐它们。我试过 padding-left 300px，但是当我调整屏幕大小时，一切都移开了。我如何让按钮基本上在页面中间对齐？ ?

.btn-toolbar 
  margin-left:-5px;


* 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;


.container 
  margin-right:auto;
  margin-left:auto;
  padding-left:15px;
  padding-right:15px;
  text-align:center;
  align-content:center;


body 
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.42857143;
  color:#666666;
  background-color:#ffffff;


html 
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;


html 
  font-size:10px;
  -webkit-tap-highlight-color:rgba(0,0,0,0);

.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group 
  text-align:center;
  align-content:center;


.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group 
  float:left;


.btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group 
  margin-left:5px;


.btn-group, .btn-group-vertical 
  position:relative;
  display:inline-block;
  vertical-align:middle;

<div class="btn-toolbar">
    <div role="group" class="btn-group">
        <button class="btn btn-default" type="button">Compare Selected Aircraft</button>
        <button class="btn btn-default" type="button">Reset Selected Aircraft</button>
    </div>
</div>

【问题讨论】：

请添加小提琴以更好地帮助您。 :) 你可以试试 flexbox。

你要去哪里？

@dippas 在容器中，就在按钮上方

【参考方案1】：

只需添加 display:block;和保证金：0自动；到 btn-group 类并删除 float:left;从按钮：

.btn-toolbar 
  margin-left:-5px;


* 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;


.container 
  margin-right:auto;
  margin-left:auto;
  padding-left:15px;
  padding-right:15px;
  text-align:center;
  align-content:center;


body 
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.42857143;
  color:#666666;
  background-color:#ffffff;


html 
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;


html 
  font-size:10px;
  -webkit-tap-highlight-color:rgba(0,0,0,0);

.btn-toolbar .btn, .btn-toolbar .btn-group, .btn-toolbar .input-group 
  text-align:center;
  align-content:center;


.btn-group 
   margin:0 auto;
   display:block;

.btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group 
  margin-left:5px;


.btn-group, .btn-group-vertical 
  position:relative;
  display:inline-block;
  vertical-align:middle;

<div class="btn-toolbar">
    <div role="group" class="btn-group">
        <button class="btn btn-default" type="button">Compare Selected Aircraft</button>
        <button class="btn btn-default" type="button">Reset Selected Aircraft</button>
    </div>
</div>

【讨论】：

你到底添加了什么？

@HoshAdf 我添加了 display:block;和保证金：0自动；到 btn-group 类，我删除了 float:left;从我的回答中提到的按钮

太棒了！谢谢老板:)

【参考方案2】：

试试这个简单的，用 text-align:center;

<div class="btn-toolbar">
<div role="group" class="btn-group" style="text-align:center">
    <button class="btn btn-default" type="button">Compare Selected Aircraft</button>
    <button class="btn btn-default" type="button">Reset Selected Aircraft</button>
</div>