Come allineare centralmente un float: menu di navigazione ul/li a sinistra con css?

Così ho il seguente CSS in atto per visualizzare una barra di navigazione orizzontale con:Come allineare centralmente un float: menu di navigazione ul/li a sinistra con css?

.navigation ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.navigation li { 
    float: left; 
    margin: 0 1.15em; 
    /* margin: 0 auto;*/ 
} 

.navigation { 
    /* width: auto;*/ 
    /* margin: 0 auto;*/ 
    text-align: center; 
}

La mia domanda è: come faccio a allineare la barra di navigazione in posizione centrale sopra il titolo?

fonte

2009-06-28 Adam Taylor

Prima di chiamare il trattino? Tu sei bandito da questa terra. ;) (Scherzando! I giocatori NetHack possono riconoscere la prima frase.) –

Dai la tua .navigation a una larghezza e utilizza il margine: 0 auto;

.navigation ul 
{ 
    list-style: none; 
    padding: 0; 
    width: 400px; 
    margin: 0 auto; 
}

fonte

2009-06-28 15:55:52 Emily

Con larghezza definita non è la soluzione reale. Se un altro elemento della lista e bisogno di cambiare larghezza. Il link di Ben Marini è la soluzione corretta che ho trovato –

La risposta di Marini dovrebbe essere contrassegnata come la risposta corretta. –

È possibile impostare la <li> 's di essere display: inline, quindi impostare text-align: center sul <ul>. In questo modo, è possibile rimuovere lo float: left dagli elementi dell'elenco e non è necessario avere una larghezza fissa per la barra di spostamento come si farebbe se si fosse utilizzato margin: 0 auto.

<html> 
    <head> 
    <style> 
     ul { 
     list-style: none; 
     text-align: center; 
     } 

     li { 
     display: inline; 
     margin: 0 1.15em; 
     } 
    </style> 
    </head> 

    <body> 
    <ul> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
    </body> 
</html>

fonte

2009-06-28 15:59:05

Bene, per usare margin:0 auto su qualcosa, si deve avere una larghezza definita. Probabilmente la migliore soluzione è:

ul li { 
    display: inline; 
    list-style-type: none; 
} 
ul { 
    text-align:center; 
}

fonte

2009-06-28 16:00:16

Puoi anche visualizzare 'display: inline-block' se vuoi usare questo metodo, ma puoi ancora usare' border', 'background e altre proprietà del blocco. –

Funziona su tutti i browser? Eventuali avvertenze di cui essere a conoscenza? – Justin

Ecco un solution that doesn't require specifying the width of your ul.

fonte

2009-12-09 17:12:36

Ancora meglio. Questa soluzione avvolge anche gli oggetti quando ridimensionate troppo piccolo, che è esattamente quello che stavo cercando qui. – Joe

Questa è la vera soluzione, non quello che Emily ha dato ... –

Questo, io amo – simPod

Ci sono poche impostazioni come float, margine che possono influire sul corretto funzionamento di questo codice. Funziona anche in IE7. Ho ottenuto questo codice da an article over at CSS Wizardry.

.navigation ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    text-align: center;/*make this change*/ 
} 
.navigation li 
{ 
    float: none;/*make this change*/ 
    display:inline;/*make this change*/ 
    margin: 0 1.15em; 
/* margin: 0 auto; */ 
} 
.navigation li a { 
    display:inline-block;/*make this change*/ 
} 
.navigation 
{ 
    /*width: auto;*/ 
    /*margin: 0 auto;*/ 
    text-align: center; 
}

fonte

2013-04-30 14:25:28

Questo funziona perfettamente con me! (se sono corrette: IE7 +)

Fiddle: http://jsfiddle.net/fourroses666/zj8sav9q/3/

.nav{list-style:none; text-align:center;} 
.nav ul{list-style:none;} 
.nav li{display:inline;} 
.nav a{text-decoration:none; font-size:20px; line-height:20px; display:inline-block;} 

<nav class="nav" role="navigation" aria-label="main navigation"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Menu</a></li> 
    <li><a href="#">Onze producten</a></li> 
    <li><a href="#">Impressie</a></li> 
    <li><a href="#">Media</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

fonte

2014-12-16 14:41:16 Marc

.navigation ul 
{ 
    list-style-type: none; 
    padding: 0px; 
    width: 200px; 
    margin: 0 auto; 
}

fonte

2015-02-18 04:51:12

Se si desidera continuare a utilizzare il tuo galleggiare LI nel codice, è possibile utilizzare questo:

JSFiddle: https://jsfiddle.net/Lvujttw3/

<style> 
.wrapper { 
    width: 100%; 
    background-color:#80B5EB; 
    text-align: center; 
    } 
.intWrapper { 
    display: inline-block; 
    } 
.mainMenu { 
    padding: 0; 
    min-height: 40px; 
    margin:auto; 
    } 
ul { 
    list-style-type: none; 
    } 
ul li { 
    float: left; 
    font-size: 15px; 
    line-height: 40px; 
    } 
ul li A { 
    display: block; 
    color: white; 
    font-weight: bold; 
    font-family: Arial; 
    text-decoration: none; 
    min-height: 40px; 
    padding: 0 36px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="intWrapper"> 
     <ul class="mainMenu"> 
      <li><a href="one.htm" style='background-color:red'>ITEM ONE</a> 
      </li><li><a href="two.htm">ITEM TWO</a> 
      </li><li><a href="three.htm" style='background-color:red'>ITEM THREE</a>   
      </li> 
     </ul></div> 
    </div> 
</div>

fonte

2017-02-10 16:42:21 Niente0

ul { 
display: inline-block; 
text-align: center; 
}

fonte

2017-06-08 07:55:24

-1

style="position: absolute; z-index: 1;"

fonte

2017-10-05 05:58:48

Si prega di aggiungere ulteriori informazioni per maggiore chiarezza sulla risposta – CodeChanger

Come allineare centralmente un float: menu di navigazione ul/li a sinistra con css?

risposta

Problemi correlati