Foundation ZURB, orizzontalmente centratura una colonna 10 della griglia 12 colonna

Foundation wizard,Foundation ZURB, orizzontalmente centratura una colonna 10 della griglia 12 colonna

Avere un momento difficile cercando di centrare un elemento 10 a colonna nella griglia colonna predefinita 12.

EDIT: compilato il codice di un po 'più

Ho provato a mettere 1 colonne su entrambi i lati senza alcun risultato:

<div class="row"> 

<div class="large-1 column"><p></div> 

<div class="large-10 columns"> 
<div class="row>five large-2 columns in here</div> 
<div class="row>five large-2 columns in here</div> 
<div class="row>five large-2 columns in here</div> 
</div> 

<div class="large-1 column"><p></div> 

</div>

Il mio obiettivo è quello di avere quella griglia 3x5 nel centro esatto della pagina. Le 1 colonne al momento non riempiono la colonna 10 al centro.

fonte

2013-04-11 travis heaver

Centro div includendo la classe large-centered, o small-centered a seconda delle esigenze:

<div class="large-10 large-centered columns"> 
    five 2 columns in here 
</div>

E se si vuole centrare il contenuto del large-10 div è possibile aggiungere la classe text-center che è incluso nel F4:

<div class="large-10 large-centered columns text-center"> 
    five 2 columns in here 
</div>

Inoltre, non dimenticare di avvolgere il tuo column divs in un row div oppure le classi columns non funzioneranno. See this fiddle come esempio.

fonte

2013-04-11 05:19:32

il .large-centered non dovrebbe essere aggiunto al css dato che è all'interno di Foundation.css per default – Dylan

@Dylan guarda da vicino la classe, non è solo la "grande centralità". È un'altra classe. In realtà avrei potuto usare la classe incorporata 'text-center'. Penso che lo aggiungerò. Ma grazie, per avermelo ricordato. –

sì, è tecnicamente '.columns.large-centered', tuttavia aggiungere le tue edizioni originali css non sarebbe stato necessario poiché lo snippet di Travis aveva già le colonne dichiarate prima della classe centrale. Non ti stavo chiamando, stava solo sottolineando che si trattava di un'aggiunta non necessaria @ von-v – Dylan

Stai cercando di centrare il testo nella colonna o centrare il div sulla pagina (margini uguali su entrambi i lati)?

Se stai solo cercando di centrare il div (e non il suo contenuto) questo funziona:

  <div class="row"> 
       <div class="columns one"></div> 
       <div class="columns ten"> 
        test 
       </div> 
       <div class="columns one"></div> 
      </div>

fonte

2013-04-11 05:07:12

Purtroppo questo non ha funzionato. Mi sto perdendo qualcosa? Ho chiarito l'HTML in uso. –

Cosa stai cercando di centrare, la colonna o il testo nella colonna? O entrambi? –

Dai un'occhiata al codice sorgente di questo violino: http://jsfiddle.net/designbymichael/2kfCq/ e provalo nel tuo ambiente Foundation. Ho buttato i bordi lì solo per vedere i confini delle tre colonne e l'elemento div centrale a dieci colonne è centrato nella riga stessa. Ho provato il tuo codice sorgente e ovviamente non ha funzionato - garantito, sto usando Foundation 2.2, e le classi che hai usato non sono nemmeno in quella versione. –

Foundation ZURB, orizzontalmente centratura una colonna 10 della griglia 12 colonna

risposta

Problemi correlati