Wenn die Dinge in HTML und CSS Zentrieren, finde ich zwei Ansätze - entweder auf dem Element Anwendung:Wie sich die Dinge zum Zentrum - display: block/inline-block
display:block;
margin:0 auto;
oder mit:
display:inline-block;
text-align:center; (on the parent element)
Ich frage mich immer was besser ist und warum. Vielen Dank!!
Es gibt keinen besseren Weg in dieser Situation beide Ansatz funktioniert und beide sind korrigiert. Nur eine Sache display: inline-block funktioniert nicht auf IE7 (wenn Sie diesen Browser unterstützt) werden Sie einen Hack müssen es
display: inline-block;
*display: inline;
zoom: 1;
Block-Elemente sollten immer zentriert funktioniert mit
.block {
margin-left: auto;
margin-right: auto;
width: 600px;
}
wie vom w3c erklärte: http://www.w3.org/Style/Examples/007/center.en.html#block
text-align: center;
ist gut benannt: es verwenden, Texte zu zentrieren.
Dies ist eine klassische und wichtige Frage.
Elemente können entweder inline sein (das heißt, sie sitzen nebeneinander - wie ein span-Tag) oder sie können block sein (dh die Stapel übereinander - wie ein div-Tag).
Rand: Auto, während ein bisschen seltsam, wenn Sie es zuerst sehen, ist die beste und einzige Möglichkeit, eine Block-Ebene (Position statisch), Element zu zentrieren.
Für alles, was angezeigt wird: Inline (wie ein span-Tag) - die nur Weg, um es zu zentrieren ist, wenn Sie text-align: Center auf dem Eltern angeben. Dies zentriert alles Display: Inline drin, das ist Position: statisch;
Anzeige: Inline-Block ist ein Hybrid der beiden, die ist relativ neu (aber unterstützt so weit zurück wie ie7, wenn Sie den Hack in einer anderen Antwort erwähnt verwenden). Mit Inline-Block erhalten Sie die Vorteile von Inline, indem Sie eine Reihe von Dingen nebeneinander halten und zentrieren können (denken Sie an ein Nav, in dem alle Nav-Objekte zentriert sind), aber ALSO haben beide Verwenden Sie einige der Sachen, die Sie mit Display erhalten: Block - der wichtigste ist HEIGHT.
Stellen Sie sich ein Szenario vor, bei dem jedes Navigationselement ein 80 Pixel großes Hintergrundbild hat - Sie können kein Inline-Element mit einer Höhe von 80 erstellen - Sie müssten also jedes Element anzeigen lassen: Block - nur dann du gibst ihm eine Höhe. Um sie alle nebeneinander erscheinen zu lassen, würdest du sie schweben lassen. Das Problem ist, wenn Sie sie schweben lassen, können Sie nicht alle auf der Seite zentriert werden, es sei denn, Sie geben dem nav und margin eine feste Breite: auto DAS. Das bedeutet, dass das Nav eine feste Breite hat - vielleicht in Ordnung, aber manchmal muss das Nav dynamische Elemente, verschiedene Breiten für verschiedene Sprachen usw. haben.
Anzeige eingeben: Inline-Block.