Centra orizzontalmente un <div> che non è fisso - css, css3, html

Voglio centrare orizzontalmente una colonna in ala griglia reattiva che sto cercando di fare, ho la griglia impostata, e funziona bene, ma voglio fare una classe che prenderà una colonna e la centrerà orizzontalmente nel genitore (.row). Vorrei usare questa classe per prendere una riga a una colonna e centrare la colonna in quella riga. Posso centrare il testo usando il text-align proprietà, ma voglio che l'intera colonna sia centrata in questo modo se aggiungo un bordo / sfondo alla colonna che sarà centrata nella riga, non solo il contenuto della colonna.

Ecco il codepen.

risposte:

Dato che stai impostando una larghezza sulla colonna, usa semplicemente margin:0 auto centrarlo Dovresti sovrascrivere float:left con float:none anche se..

ESEMPIO AGGIORNATO QUI

.center {
text-align: center;
margin:0 auto;
float:none;
}

In alternativa, se l'elemento doesn "t avere una larghezza fissa impostata su di esso, potresti semplicemente renderlo un inline-block elemento e aggiungi text-align:center al genitore. Perfetto per larghezze dinamicamente variabili.