Imansible centrare un ul all’interno di un div

Sto cercando di centrare i miei collegamenti di navigazione all’interno del div ma non importa quello che ho provato, non funzionerà. Ho provato margin-left:auto , margin-right:auto , ma niente …

Ecco la sezione del codice CSS:

 #nav { display:block; background-color:#505050; height:17.5px; box-shadow: 0px 0px 15px 5px #CCCCCC inset; border:1px solid #EEEEEE; border-radius:20px; padding:1.5%; } #nav li { padding:0px 20px 0px 20px; display:inline; /*float:left;*/ list-style:none; position:relative; } #nav li a { padding:0px 0px 20px 0px; color:#FFFFFF; text-decoration:none; } 

e qui è il mio codice ul:

  

Ecco il resto del mio codice in realtà senza di esso ho notato che il mio menu a discesa sotto (galleria) non viene visualizzato correttamente, … ecco il resto del file css … che mostra cosa succede al menu a tendina. ..potresti dirmi perché il galleggiante avvita tutto …

… e il testo allineato ha funzionato alla grande …. ma solo dopo aver rimosso il galleggiante …

 #nav li a:hover { text-decoration:underline; } #nav li ul{ padding:10px; font-size:medium; display:none; position:absolute; left:0px; top:30px; background-color:rgba(50,50,50,0.8); } #nav li:hover ul { display:block; border-radius:20px; border:1px solid; width:150px; } 

Aggiungere text-align: center della lista non ordinata di Nav sembra funzionare per me in chrome

 #nav { text-align: center; } 

Questo è in realtà abbastanza semplice, dal momento che gli elementi della lista sono display:inline . Aggiungi questo stile:

 #nav { text-align:center; } 

Demo: http://jsfiddle.net/fH6f5/

Ci sono molti altri modi per farlo, ma questo sembra essere tutto ciò di cui hai bisogno. Assicurati di non float il

  • s (vedo che hai commentato).

    Per centrare un elemento di blocco, devi anche impostare esplicitamente la larghezza su un valore, come questo:

     #nav { width: 50%; margin: 0 auto; } 

    Ci sono alcune modifiche che dovrai apportare al tuo codice per poterlo visualizzare correttamente. Gli elementi della lista sono attualmente elementi in inline . inline elementi inline hanno un sacco di restrizioni, tra cui non essere in grado di impostare in modo esplicito la loro larghezza, altezza e il loro margine superiore e inferiore. Tieni presente che secondo le specifiche W3 :

    Generalmente, gli elementi in linea possono contenere solo dati e altri elementi in linea.

    Detto questo, puoi usare display: inline-block senza problemi per il tuo codice corrente. C’è una cosa molto importante da tenere a mente sull’uso inline-block elementi di inline-block : spazio bianco . Qualsiasi spazio tra gli elementi inline-block nel tuo codice verrà mostrato come uno spazio sul tuo browser. Quindi, se vuoi che gli elementi siano commoventi, i loro tag devono toccare anche:

      
  • Home
  • About Us
  • Home
  • About Us
  • Se scegli la versione A dal codice sopra, ti consigliamo di float gli elementi anziché affidarti al inline-block in inline-block per il posizionamento. Centrare un elenco fluttuato è un po ‘più difficile del centrare un elenco in inline . Ecco un modo in cui mi piace centrare elementi fluttuanti:

      

    CSS:

     nav { overflow: hidden; } nav ul { position: relative; float: left; left: 50%; list-style: none; padding: 0; } nav ul li { position: relative; float: left; right: 50%; margin: 0 5px; } nav ul li a { display: block; } 

    Anteprima: http://jsfiddle.net/Wexcode/rsDbY/

    Dovresti postare il design che desideri per il menu a tendina, non so davvero come vuoi che sia il tuo risultato finale, quindi non posso davvero aiutarti in questo.

    È necessario impostare una larghezza fissa su ul per margin-right:auto e margin-left:auto

    Hai provato ad aggiungere margin: 0 auto; in stile #nav ? Devi anche impostare la larghezza per farlo funzionare.