How to align button group in the centre? Html css

Question

I have two buttons in a group and I want to align them under the heading. I've tried padding-left 300px, but when I resize the screen everything moves out. How do I get the buttons to align in the middle of the page basically? ?

.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>

Please add fiddle to help you better. :) You can try with flexbox. — Nadezhda Serafimova, Mar 27 '17 at 11:04

score 4 · Accepted Answer · answered Mar 27 '17 at 11:10

Just add display:block; and margin:0 auto; to the btn-group class and remove the float:left; from the buttons:

.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 I added display:block; and margin:0 auto; to the btn-group class and I removed the float:left; from the buttons as, mentioned in my answer — Arjan Knol, Mar 27 '17 at 11:12

score -2 · Answer 2 · answered Mar 27 '17 at 11:05

Try this simple one, with 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>

How to align button group in the centre? Html css

2 Answers2