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

【问题标题】：How to align button group in the centre? Html css [duplicate]如何在中心对齐按钮组？ html css [重复]
【发布时间】：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 在容器中，就在按钮上方

标签： html css

【解决方案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>

【讨论】：