Scatola centrale con elementi in blocco

Question

Ho una scatola con elementi che hanno un display: blocco in linea. Nel caso in cui gli elementi nella casella non riempiano l'intera linea, avrei bisogno di allineare il contenuto nel mezzo, ma gli elementi a sinistra.

Ho provato a configurare l'intero contenuto in blocco inline, ma funziona solo se c'è solo una riga di elementi, non due o più righe. Inoltre, ho bisogno che sia reattivo, quindi nessun rientro fisso può essere usato.

schermo:

Codice:

.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

È possibile rimuovere display:inline-block; dal contenitore padre, ma tenerlo negli elementi figlio.

Per altro contenitore che si può andare:

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

Impostare la max-width a tutto ciò che più vi si addice.

EDIT: Sono consapevole che questa non è una soluzione perfetta per quello che volevi, ma per quanto mi riguarda quello che vuoi non è possibile senza alcuni script.

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

Basta aggiungere width a .inner

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

Come si può vedere da background-color (jsFiddle), funziona, ma a volte i tuoi pulsanti non si adattano a un vuoto spazio e avvolgere alla riga successiva. Per risolvere questo problema, è necessario utilizzare le query multimediali o il bootstrap per esempio. Usando il bootstrap puoi facilmente impostare i pulsanti per regolare la loro larghezza rispetto allo spazio disponibile (jsFiddle)