CSS: come allineare gli elementi attorno a un elemento centrato?

Question

Sto cercando di creare un semplice navigazione pagina composta di tre parti:

1. Alcuni numeri di pagina precedenti (se del caso)
2. Il numero di pagina corrente (questo deve essere centrato)
3. Alcuni imminente numeri di pagina (se presenti)

L'importante è che il numero di pagina corrente sia sempre centrato orizzontalmente nel contenitore padre. Le altre due parti dovrebbero occupare lo spazio orizzontale rimanente in modo uniforme.

Questo JSFiddle illustra i miei due tentativi di risolvere questo problema.

Soluzione 1: utilizzare text-align: center. Questo raggiunge il risultato desiderato ma solo se entrambi i lati sono uguali in larghezza. In caso contrario, il numero di pagina corrente non sarà al centro.

HTML

<div class="container"> 
    <input type="button" value="47"> 
    <input type="button" value="48"> 
    <input type="button" value="49"> 
    <input type="text" size="5" maxlength="5" value="50"> 
    <input type="button" value="51"> 
    <input type="button" value="52"> 
    <input type="button" value="53"> 
</div> 

CSS

.container, input { 
    text-align: center; 
} 

Soluzione 2: utilizzare larghezze specificate manualmente per distribuire lo spazio orizzontale uniformemente. Centra efficacemente il numero di pagina corrente in tutte le circostanze, ma richiede una larghezza hardcode.

HTML

<div class="container"> 
    <div class="left"> 
     <input type="button" value="47"> 
     <input type="button" value="48"> 
     <input type="button" value="49"> 
    </div> 
    <div class="right"> 
     <input type="button" value="51"> 
     <input type="button" value="52"> 
     <input type="button" value="53"> 
    </div> 
    <div class="center"> 
     <input type="text" size="5" maxlength="5" value="50"> 
    </div> 
</div> 

CSS

.left { 
    width: 40%; 
    float: left; 
    text-align: right; 
} 
.right { 
    width: 40%; 
    float: right; 
    text-align: left; 
} 
.center { 
    width: 20%; 
    margin-left: 40%; 
} 

Nessuna di queste soluzioni davvero fare quello che voglio. Esiste un modo per avere il numero di pagina corrente centrato consentendo agli altri elementi di allinearsi alle sue dimensioni naturali, piuttosto che a un pixel arbitrario o alla larghezza percentuale?

Answer 1

Si dovrebbe usare flex e galleggiare proprietà insieme, cassa my soluzione :

.container { 
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
} 
 

 
.container, input { 
 
    text-align: center; 
 
} 
 

 
.container:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 2px dotted #ff0000; 
 
} 
 

 
.left { 
 
    display: inline-block; 
 
    flex: 1; 
 
    
 
} 
 

 
.left input { 
 
    float: right; 
 
} 
 

 
.right { 
 
    display: inline-block; 
 
    flex: 1; 
 
} 
 

 
.right input { 
 
    float: left; 
 
} 
 

 
.center { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="48"> 
 
     <input type="button" value="49"> 
 
    </div> 
 
    <div class="center"> 
 
     <input type="text" size="5" maxlength="5" value="50"> 
 
    </div> 
 
    <div class="right"> 
 
     <input type="button" value="51"> 
 
     <input type="button" value="52"> 
 
     <input type="button" value="53"> 
 
    </div> 
 
    
 
</div>

Answer 2

Prova questo layout tabella CSS segue.

.container { 
 
    width: 100%; 
 
    display: table; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
} 
 
.left, .center, .right { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 
.center { 
 
    width: 50px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="47"> 
 
     <input type="button" value="48"> 
 
     <input type="button" value="49"> 
 
    </div> 
 
    <div class="center"> 
 
     <input type="text" size="5" maxlength="5" value="50"> 
 
    </div> 
 
    <div class="right"> 
 
     <input type="button" value="51"> 
 
     <input type="button" value="52"> 
 
     <input type="button" value="53"> 
 
    </div> 
 
</div>

jsfiddle

Answer 3

ecco una soluzione che si potrebbe prendere in considerazione:

Utilizzare i pulsanti nascosti per mantenere sempre lo stesso numero di tag sul lato destro e sinistro

<div class="container"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input type="text" size="5" maxlength="5" value="1"> 
    <input type="button" value="2"> 
    <input type="button" value="3"> 
    <input type="button" value="4"> 
</div> 

Answer 4

Invece di specificare la larghezza in% è possibile utilizzare calc CSS per dividere l'intera larghezza in 3 parti:

[50% - 25px][50 px][50% - 25px] 

il tasto destro del allineare la parte sinistra, a sinistra allineare la parte destra e il gioco è fatto. Quando si utilizza SASS o MENO è sufficiente specificare la larghezza della parte centrale.

.container { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.container > * { 
 
    display: inline-block; 
 
} 
 
.container .left { 
 
    width: calc(50% - 25px); 
 
    text-align: right; 
 
} 
 
.container > input { 
 
    width: 50px; 
 
    margin: 0px; 
 
    text-align: center; 
 
} 
 
.container .right { 
 
    width: calc(50% - 25px); 
 
    text-align: left; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="48" /> 
 
     <input type="button" value="49" /> 
 
    </div> 
 
    <input type="text" maxlength="5" value="50" /> 
 
    <div class="right"> 
 
     <input type="button" value="51" /> 
 
     <input type="button" value="52" /> 
 
     <input type="button" value="53" /> 
 
    </div> 
 
</div>

Answer 5

È possibile utilizzare la proprietà CSS display con il valore flex nella confezione, e la proprietà flex nei figli.

Per saperne di più, controllare la seguente risorsa: A Complete Guide to Flexbox

Ecco un esempio:

.wrapper { 
 
    display: flex; 
 
} 
 
.wrapper > div { 
 
    text-align: center; 
 
    flex: 1; 
 
    border: 1px solid #000; 
 
}

<div class="wrapper"> 
 

 
    <div> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    </div> 
 

 
    <div> 
 
    <button>3</button> 
 
    </div> 
 

 
    <div> 
 
    <button>4</button> 
 
    <button>5</button> 
 
    <button>6</button> 
 
    </div> 
 

 
</div>