Center box with inline-block items

Question

I have a box with items which have a display: inline-block. In the case that items in the box don't fill the whole line, I would need to align the content in the middle, but items to the left.

I have tried to set up the whole content in inline-block, but this works only if there is just one line of items, not two or more lines. Also, I need it to be responsive, so no fixed indent can be used.

Screen:

Code:

.booking-time{
  font-size: 0;
  line-height: 0;
  border: 1px solid red;
  padding: 5px;
  text-align: center;
}
.inner{
  display: inline-block;
  text-align: left;
}
.btn{
  width: 100px;
  background: #3578d5;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.3s, color 0.3s, background 0.3s;
  margin: 0 5px 5px 0;
}

<div class="booking-time">
  <div class="inner">
    <button type="button" class="btn btn-flat">
      8:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      8:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      8:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      8:45 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:45 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:45 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:45 AM
    </button>
  </div>
</div>

This is not possible...that's not the way the line box model works. You would need to adjust the margins using media queries. — Paulie_D, May 19 '16 at 10:38
Essentially related - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, May 19 '16 at 10:39
Just add `width` to **.inner** https://jsfiddle.net/buksy/hbaj7qkj/ , as you can see by background-color, it works, sumetimes just your buttons doesn't fit empty space and wrap to next line — Buksy, May 19 '16 at 11:53
[Here is an example](http://stackoverflow.com/a/21245751/703717) of achieving this using media queries (with the help of a preprocessor) — Danield, May 19 '16 at 12:32

score 4 · Answer 1 · edited May 19 '16 at 11:38

You can remove display:inline-block; from the parent container but keep it in the child elements.

For your other container you can go:

.inner{
  display:block;
  max-width:90%;
  margin:0 auto;
  text-align: left;
}

Set the max-width to whatever suits you.

EDIT: I'm aware that this is not a perfect solution to what you wanted, but as far as I'm concerned what you want is not possible without some scripts.

This snippet can also be found on jsFiddle

.booking-time{
  font-size: 0;
  line-height: 0;
  border: 1px solid red;
  padding: 5px;
  text-align: center;
}
.inner{
  display:block;
  max-width:90%;
  margin:0 auto;
  text-align: left;
}
.btn{
  width:100px;
  background: #3578d5;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.3s, color 0.3s, background 0.3s;
  margin: 0 5px 5px 0;
}

<div class="booking-time">
  <div class="inner">
    <button type="button" class="btn btn-flat">
      8:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      8:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      8:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      8:45 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      9:45 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      10:45 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:00 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:15 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:30 AM
    </button>
    <button type="button" class="btn btn-flat">
      11:45 AM
    </button>
  </div>
</div>

Buksy · Answer 2 · 2016-05-19T12:32:22.933

Just add width to .inner

.inner{
  width: 80%; /* ADD THIS to set width of container */
  display: inline-block;
  text-align: left;
}

As you can see by background-color (jsFiddle), it works, but sometimes your buttons just doesn't fit an empty space and wrap to next line. To solve this you would need to use css media queries or bootstrap for example. Using bootstrap you can easily make your buttons to adjust their width to available space ( jsFiddle )

Center box with inline-block items

2 Answers2