Wie man Dinge zentriert – display:block/inline-block

Lesezeit: 2 Minuten

Benutzer-Avatar
Benutzer2335065

Beim Zentrieren von Dingen in HTML und CSS finde ich zwei Ansätze – entweder auf das Element angewendet:

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!!

Das ist eine klassische und wichtige Frage.

Elemente können entweder inline sein (was bedeutet, dass sie alle nebeneinander sitzen – wie ein span-Tag) oder sie können blockartig sein (was bedeutet, dass sie übereinander gestapelt sind – wie ein div-Tag).

Rand: Auto, obwohl es auf den ersten Blick etwas seltsam ist, ist die beste und einzige Möglichkeit, ein Element auf Blockebene (Position statisch) zu zentrieren.

Für alles, was angezeigt wird: Inline (wie ein Span-Tag) – die nur Möglichkeit zum Zentrieren ist, wenn Sie text-align: center auf dem übergeordneten Element angeben. Dadurch wird alles display: inline darin zentriert, dh position: static;

Display: inline-block ist also eine Mischung aus beidem verhältnismäßig neu (wird aber schon seit IE7 unterstützt, wenn Sie den in einer anderen Antwort erwähnten Hack verwenden). Mit Inline-Block erhalten Sie die Vorteile von Inline, indem Sie eine Reihe von Dingen nebeneinander kleben und sie alle zentrieren lassen können (denken Sie an ein Navigationsgerät, bei dem alle Navigationselemente alle zentriert sind), aber AUCH jedes haben item Nutzen Sie einige der Dinge, die Sie mit display: block erhalten – das wichtigste ist HEIGHT.

Stellen Sie sich ein Szenario vor, in dem jedes Navigationselement ein Hintergrundbild hat, das 80 Pixel hoch ist – Sie können einem Inline-Element keine Höhe von 80 Pixeln geben – also müssten Sie jedes Element anzeigen lassen: Block – nur dann können Sie ihm einen geben Höhe. Damit sie also alle nebeneinander erscheinen, würden Sie sie schweben lassen. Das Problem ist, wenn Sie sie schweben lassen, können Sie sie nicht alle auf der Seite zentrieren lassen, es sei denn, Sie geben der Navigationsleiste und dem Rand eine feste Breite: automatisch DAS. Das bedeutet, dass das Navi eine feste Breite hat – das mag in Ordnung sein, aber es gibt Zeiten, in denen das Navi dynamische Elemente, unterschiedliche Breiten für verschiedene Sprachen usw. haben muss.

Geben Sie display: inline-block ein.

  • Markieren Sie dies als Antwortanzeige: Inline-Block.!

    – Kajal Sinha

    25. April 2018 um 9:20 Uhr

Benutzer-Avatar
evuez

Blockelemente sollten immer mit zentriert werden

.block {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

wie vom w3c angegeben: http://www.w3.org/Style/Examples/007/center.en.html#block

text-align: center;

hat einen guten Namen: Verwenden Sie es, um Texte zu zentrieren.

Aktualisieren

Sie können auch verwenden display: flex jetzt:

.parent {
    display: flex;
    justify-content: center;
}
.block {
    width: 200px;
}

  • text-align ist nicht gut benannt; es sollte sein inline-align.

    – Lawrence Dol

    20. April 2021 um 22:13 Uhr

Es gibt keinen besseren Weg in dieser Situation, beide Ansätze werden funktionieren und beide werden korrigiert. Nur eine Sache, display:inline-block funktioniert nicht auf IE7 (wenn Sie diesen Browser unterstützen), brauchen Sie einen Hack, damit es funktioniert

display: inline-block;
*display: inline;
zoom: 1;

1229620cookie-checkWie man Dinge zentriert – display:block/inline-block

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy