Perché non riesco a centrare con il margine: 0 auto?

130

Ho un #headerdiv che è 100% widthe all'interno di quel div ho un elenco non ordinato. Ho applicato margin: 0 autoall'elenco non ordinato ma non lo centrerà all'interno del div dell'intestazione.

Qualcuno può dirmi perché? Ho pensato che se definissi la larghezza del div parent, allora l'elenco non ordinato dovrebbe essere in grado di centrarsi margin: 0 auto. Cosa mi sto perdendo?

Ecco il mio codice:

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— zeckdude
fonte

Quale browser utilizzate? IE / Win ha alcuni problemi con Margin auto.

— JD Frias,

Perché galleggi anche il tuo ul a destra? Tiralo fuori, e probabilmente anche il float: lasciato per li, e dovresti stare bene.

— Simon,

1

Sto creando una barra di navigazione. Ho tirato fuori il galleggiante a destra per l'ul e ho inserito un galleggiante a sinistra per il li, ma questo ora mette tutto a sinistra.

— zeckdude,

135

Devi definire la larghezza dell'elemento che stai centrando, non l'elemento genitore.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Modifica : Ok, ho visto la pagina di test ora, ed ecco come penso che tu lo voglia:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— PatrikAkerstrand
fonte

2

cosa succede se la larghezza di ul sarà dinamica. Sto pensando di inserire in modo diverso testo diverso in li con PHP più tardi, quindi sto cercando di anticiparlo.

— zeckdude,

2

Sì, quindi non puoi centrare usando margin: auto;

— PatrikAkerstrand,

1

Ho provato il tuo ultimo suggerimento, ma non ha funzionato. Ho caricato la versione più recente con i tuoi consigli nella stessa posizione in modo da poter vedere quello che sto vivendo. L'ul viene appena spostato a destra di circa 50 px.

— zeckdude,

1

Come ho detto nel mio suggerimento, rimuovere il float: left

— PatrikAkerstrand

1

Ha funzionato alla grande! Grazie mille per essere rimasto con me e aiutarmi! Quel problema mi sta uccidendo! Grazie ancora!

— zeckdude,

44

Un blocco inline copre l'intera linea (da sinistra a destra), quindi un margine sinistro e / o destro non funzionerà qui. Ciò di cui hai bisogno è un blocco, un blocco ha i bordi a sinistra e a destra, quindi può essere influenzato dai margini.

Funziona così per me:

#content {
display: block;
margin: 0 auto;
}

— Hoeks
fonte

Grazie per il suggerimento molto utile, ho avuto lo stesso problema con un elemento inline e non sono riuscito a capire perché non funzionasse

— mastazi

Questa è la risposta migliore e funziona per finestre di dimensioni multiple.

— Yuda Prawira,

14

Perchè no?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
fonte

Ho aggiunto text-align: left; a #header ul per centrare l'ul e mantenere il testo in li allineato a sinistra. Avevo anche bisogno di impostare l'ul per visualizzare come blocco inline affinché la larghezza fosse dinamica (auto).

— Brent Self

3

Non so il motivo per cui la prima risposta è il migliore, ho provato e non funziona infatti, come @ kalys.osmonov ha detto, si può dare text-align:centera header, ma si deve fare ulcome inline-blockpiù che inline, e inoltre si deve notare che text-alignpuò essere ereditato che non è buono in una certa misura, quindi il modo migliore (non funziona sotto IE 9) è usare margine transform. Basta rimuovere float righte margin;0 autoda ul, come di seguito:

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

In questo modo è possibile risolvere il problema di rendere dinamica la larghezza del ulcentro se non ti interessa IE8 ecc.

— Bill Dou
fonte

0

Possiamo impostare la larghezza per il tag ul, quindi si allinea il centro.

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— Vani S
fonte