Heim >Web-Frontend >CSS-Tutorial >Analyse der Gründe, warum die horizontale Zentrierung ungültig ist, wenn margin:0 auto in CSS festgelegt wird
Analyse der Gründe, warum die horizontale Zentrierung ungültig ist, wenn margin:0 auto in CSS festgelegt wird
- 伊谢尔伦Original
- 2016-11-23 14:36:322162Durchsuche
Ein häufiges Problem, auf das viele Neulinge beim Erstellen von Webseiten stoßen, ist, dass das Hinzufügen von margin:0 auto; in CSS keine Auswirkung hat und nicht zentriert werden kann ist 0, die linke und rechte Seite sind entsprechend der Breite adaptiv, was eigentlich eine horizontale Zentrierung bedeutet. Hier sind zwei typische Fehler, die Probleme verursachen, die nicht zentriert werden können:
Die Breite ist nicht eingestellt
<div style="margin:0 auto;"></div>
Sehen Sie sich den obigen Code an. Die Breite des DIV ist überhaupt nicht festgelegt. Probleme, die für Anfänger leichter zu übersehen sind.
2. DOCTYPE ist nicht deklariert
1) DOCTYPE ist die Abkürzung für Dokumenttyp, die im Webdesign verwendet wird, um anzugeben, welche Version von XHTML oder HTML Sie verwenden. Um eine standardkonforme Webseite zu erstellen, ist die DOCTYPE-Deklaration eine wesentliche und kritische Komponente.
2) Schauen Sie sich den folgenden Code an. So wird oben im Dokument vor allem der Code verwendet, um DOCTYPE zu deklarieren:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3) Sie haben drei Möglichkeiten, DOCTYPE zu deklarieren
* Übergang: A DTD mit sehr lockeren Anforderungen, die es Ihnen ermöglicht, weiterhin das HTML4.01-Logo zu verwenden (muss jedoch der Schreibmethode von xhtml entsprechen). Der vollständige Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* Streng ( Streng). ): DTD mit strengen Anforderungen. Sie können keine Bezeichner und Attribute der Präsentationsebene verwenden, wie z. B. 0c6dc11e160d3b678d68754cc175188a Wenn Ihre Seite einen Frame enthält, müssen Sie diesen DTD verwenden. Der vollständige Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4) Wählen Sie einfach den Übergangscode aus.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Nach längerem Gespräch funktioniert margin:0 atuo; Wenn es nicht zentriert werden kann, prüfen Sie, ob sich oben in Ihrem Dokument eine DOCTYPE-Anweisung befindet und es wird gut. Der tatsächliche Effekt von margin-left:auto; kann auch darin liegen, dass die Höhe von margin-top nicht festgelegt ist 0. , werden unerwartete Effekte auftreten.