9

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:enter image description here

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>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Stalky
  • 121
  • 6
  • 3
    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
  • 1
    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

2 Answers2

4

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>
Manfred Radlwimmer
  • 13,257
  • 13
  • 53
  • 62
fnune
  • 5,256
  • 1
  • 21
  • 35
1

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 )

Buksy
  • 11,571
  • 9
  • 62
  • 69