インラインブロックの項目を含む中央のボックス

Question

私はディスプレイを持つ項目を持つボックスを持っています：インラインブロック。ボックス内のアイテムが行全体を満たさない場合は、コンテンツを中央に配置する必要がありますが、アイテムは左側に配置する必要があります。

私はインラインブロックでコンテンツ全体を設定しようとしましたが、これは2行以上ではなく1行の項目がある場合にのみ機能します。また、応答性が必要なので、固定インデントは使用できません。

画面：

コード：

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

Answer 1

あなたは親コンテナからdisplay:inline-block;を削除しますが、子要素でそれを維持することができます。あなたが行くことができます他の容器については

：max-widthを設定

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

あなたに合ったものは何でもします。

EDIT：これはあなたが望むものに対する完璧な解決策ではないことを認識していますが、私が望む限り、あなたが望むものはいくつかのスクリプトなしでは不可能です。

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>

Answer 2

ただ、時々、あなたは背景色（jsFiddle）で見ることができるようにwidthに.inner

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

を追加し、それは動作しますが、あなたのボタンはちょうど空に収まらない次の行に折り返します。 これを解決するには、たとえばcssメディアクエリまたはブートストラップを使用する必要があります。ブートストラップを使用すると、ボタンの幅を空きスペースに簡単に調整できます（jsFiddle）