Centering buttons and containers

Question

I need some help centering some of my code. I'm not sure if I may have used the wrong centering method but it's not quite working for me. It's HTML code but meant to be coded for mobile use. The problem with my code is that the button container won't center to the screen and stays left-aligned.

.btn-container {
  margin: 0 auto;
  align-content: center;
  display: flex;
  border: none;
}

.btn-group button {
  width: 150px;
  height: 120px;
  display: flex;
  justify-content: center;
  background-color: #404040;
  border: none;
  margin: 10px;
  cursor: pointer;
  float: left;
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

<body>
  <div class="destination-title">
    <a>Choose Your Destination</a>
  </div>

  <div class="btn-container">
    <div class="btn-group">
      <button>Opt 1</button>
      <button>Opt 2</button>
      <button>Opt 3</button>
      <button>Opt 4</button>
      <button>Opt 5</button>
      <button>Opt 6</button>
    </div>
  </div>

  <div class="button-divider"></div>

  <div>
    <button class="continue-button"> <ahref="customize.html">Continue</a></button>
  </div>
</body>

Your question is unclear. What is wrong, what is okay and what do you want to get? — Yarl, Mar 20 '19 at 17:06
Sorry! My entire button container won't center and sticks to the left margin — bubblegum, Mar 20 '19 at 17:08
I don't think when the divs wrap you can *center it while keeping the wrapped divs left aligned* whether you use *floats* or *flexbox items* - [**`see here`**](https://stackoverflow.com/questions/54648178/wrapping-flex-items-in-the-last-row-css-grid-to-the-rescue) if CSS grid is an option — kukkuz, Mar 20 '19 at 17:14
Don't mix float and Flexbox, and your `btn-group` also needs to be displayed as a flex container. — Asons, Mar 20 '19 at 17:22

Andy Hoffman · Accepted Answer · 2019-03-20T17:33:34.523

The following CSS will center the flex items at any screen resolution. For the outer container, .btn-container, use justify-content: center instead of align-content: center. The inner container, .btn-group, needs the same flexbox rules as its parent container.

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

As stated in the comments, you should not mix float with flexbox. I removed the float property from your CSS as well as the clearfix hack you had added. This hack was invented to deal with floated content. Flexbox doesn't have this issue.

Demo

.btn-container {
  margin: 0 auto;
  border: none;
}

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

.btn-group button {
  width: 150px;
  height: 120px;
  display: flex;
  justify-content: center;
  background-color: #404040;
  border: none;
  margin: 10px;
  cursor: pointer;
}

<body>
  <div class="destination-title">
    <a>Choose Your Destination</a>
  </div>

  <div class="btn-container">
    <div class="btn-group">
      <button>Opt 1</button>
      <button>Opt 2</button>
      <button>Opt 3</button>
      <button>Opt 4</button>
      <button>Opt 5</button>
      <button>Opt 6</button>
    </div>
  </div>

  <div class="button-divider"></div>

  <div>
    <button class="continue-button"> <ahref="customize.html">Continue</a></button>
  </div>
</body>

score 0 · Answer 2 · answered Mar 20 '19 at 17:20

You could add justify-content: center; in .btn-container class

.btn-container {
  margin: 0 auto;
  align-content: center;  /*Could probably be removed.*/
  justify-content: center; /*Try adding this according to https://www.addtoany.com/buttons/customize/center_align_buttons*/
  display: flex;
  border: none;
}

Centering buttons and containers

2 Answers2