0

I need to centre a row of three buttons in the middle of a page, so the three are beside each other horizontally with no space between them. I've tried so many different methods of centring but to no avail.

div.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  align-content: center;
  text-align: center;
}

div.bottomwhitespace {
  padding-bottom: 100pt;
  padding-top: 100pt;
}

.btn-group .button {
  background-color: #4CAF50;
  /* Green */
  margin-top: 35pt;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  float: left;
  display: inline-block;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
<div class="bottomwhitespace" class="centre">
  <div class="btn-group">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
  </div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
PythonParka
  • 134
  • 3
  • 13

6 Answers6

0

You can use display: flex on a parent to align children items side-by-side. To specify that you want them centered, you can add justify-content: center;.

.btn-group {
    display: flex;
    justify-content: center;
}

This method replaces your need for floats, so I've removed them from the buttons themselves.

div.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  align-content: center;
  text-align: center;
}

div.bottomwhitespace {
  padding-bottom: 100pt;
  padding-top: 100pt;
}

.btn-group {
   display: flex;
   justify-content: center;
}

.btn-group .button {
  background-color: #4CAF50;
  /* Green */
  margin-top: 35pt;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
<div class="bottomwhitespace" class="centre">
  <div class="btn-group">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
  </div>
</div>
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
0

I've uploaded the updated CSS and HTML in a fiddle. I used display: flex thats the easiest way to center the buttons on the page. I didn't knew if you only wanted to center them horizontally so I did both horizontal and vertical.

http://jsfiddle.net/tcudp1ms/4/

CSS

html, body, .centre {
  height: 100%;
  width: 100%;
}

div.centre {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-group .button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  float: left;
  display: inline-block;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}

HTML

<div class="centre">
  <div class="btn-group">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
  </div>
</div>
Quentin Albert
  • 560
  • 3
  • 10
  • As a word of advice, both answers and questions should never rely on external resources, especially considering that StackOverflow has an inline snippet tool. If JSFiddle were to go down today, your answer becomes nearly useless! Try editing your question and pasting the necessary code into an inline snippet instead :) – Tyler Roper Jun 28 '18 at 13:28
  • @QuentinAlbert You are very close, but try using the Inline Snippet Tool instead of simple code formatting. This can be done using the button that looks a piece of paper with `<>` on it. – Tyler Roper Jun 28 '18 at 13:32
0
  • Apply display:flex; to div.bottomwhitespace
  • And margin: 0 auto; to .btn-group

Thats it :)

div.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  align-content: center;
  text-align: center;
}

.btn-group {
  margin: 0 auto;
}

div.bottomwhitespace {
  padding-bottom: 100pt;
  padding-top: 100pt;
  display: flex;
}

.btn-group .button {
  background-color: #4CAF50;
  /* Green */
  margin-top: 35pt;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  float: left;
  display: inline-block;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
<div class="bottomwhitespace" class="centre">
  <div class="btn-group">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
  </div>
</div>
vaishali kapadia
  • 934
  • 11
  • 22
0

In your particular case, you have 2 problems: 1. float:left prevent the centering 2. Gather all classes in one singlet class attribute (so text-align: center wasn't applied)

Below your initial code fixed

div.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  align-content: center;
  text-align: center;
}

div.bottomwhitespace {
  padding-bottom: 100pt;
  padding-top: 100pt;
  font-size: 0
}

.btn-group .button {
  background-color: #4CAF50;
  /* Green */
  margin-top: 35pt;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
<div class="bottomwhitespace centre">
  <div class="btn-group">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
  </div>
</div>
PIIANTOM
  • 1,311
  • 11
  • 20
  • A note: using `inline-block` with line breaks in your markup causes letter-spacing between adjacent elements. You'd have to do something like specify a `font-size` of `0` on the parent, put all your ` – Tyler Roper Jun 28 '18 at 13:29
  • Indeed, that's the usual inline-block issue. Just wanted to post and answer in the code context of @Cormac initial question – PIIANTOM Jun 28 '18 at 13:31
  • This worked for centring, thank you! Just before I accept the answer, do you know how I'd do this so that there's no space between the buttons? the `float:left;` was what was doing this in my original code. – PythonParka Jun 28 '18 at 14:00
  • Yes. Space can be removed in multiple ways. What @Tyler Roper suggested is one of those. You have a multiple variations for this issue as explained here https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements I'll adapt the answer to remove these spaces by using the font-size property – PIIANTOM Jun 28 '18 at 14:42
  • @Cormac It looks like PIIANTOM has resolved the issue so this answer is accept-worthy now (my personal opinions on this workaround withstanding...), but for future notice - make sure to accept what you believe is the best answer. If you come across an answer that doesn't completely resolve the issue, take some time to consider the others as well. – Tyler Roper Jun 28 '18 at 14:45
0

display:flex seems to be what you are looking for. It allows easy formatting of such things.

div.bottomwhitespace {
    display: flex;
    justify-content: center;
    align-items: center;
    height:300px;
}

.button {
   background-color: #4CAF50;
   /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}

.button:hover {
    background-color: #3e8e41;
}
<div class="bottomwhitespace">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
</div>
Cyphall
  • 348
  • 1
  • 10
0

First of all you are missing a </div> in your snippet.

If you want to use margin auto for center content inside a div, you have to use a fixed width for it.

There is another two ways of doing this

text-aling: center; for the parent and display: inline-block for the children

and

using flexbox with justifycontent center

The main difference between this 2 is with display:inline-block if one of the items do not fit in first row, will move to the second row.

.center-content-display{
  width:600px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  outline:1px solid green;
}
.item{
  display: inline-block;
  min-width: 200px;
  min-height: 40px;
  text-align:left;
}
.item1{ background: red;}
.item2{ background: blue;}

.center-content-flex{
  width:600px;
  text-align: center;
  display: flex;
  justify-content: center;
  vertical-align: top;
  outline:1px solid green;
}
    <h1>Using Display inline-block</h1>
<span>Parent div w:600px</span>
<div class="center-content-display">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>


<h1>Using Display flex (flexbox)</h1>
<span>Parent div w:600px</span>
<div class="center-content-flex">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>


<h1>Using Display inline-block</h1>
<span>Parent div w:300px</span>
<div class="center-content-display" style="width:300px;">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>


<h1>Using Display flex (flexbox)</h1>
<span>Parent div w:300px</span>
<div class="center-content-flex" style="width:300px;">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>

Hope this helps

Teobis
  • 825
  • 5
  • 12