Was ist der Unterschied zwischen der Verwendung von 'align: center' und 'margin: 0 auto', um ein Element in CSS zu zentrieren?

8

Ich habe an vielen Stellen gelesen, um Elemente (z. B. ein div) mit margin:0 auto zu zentrieren.
aber warum nicht align:center verwenden? Ich denke, es scheint natürlicher, das Spätere zu benutzen.

Funktioniert die Ausrichtung mit margin auch vertikal?

    
Karim 06.03.2010, 13:17
quelle

3 Antworten

13

Erstens gibt es kein "align: center". Was Sie denken, ist "text-align: center", und dieses Detail - das Präfix "text-" - ist ein Hinweis darauf, was das Problem ist. Die Eigenschaft "text-align" dient dazu, Inline-Elemente in Blöcken anzuordnen. Wenn Sie versuchen, ein Element auf Blockebene in einem Inhalt zu zentrieren, ist ein Inline-Layoutstil nicht sinnvoll.

Das Attribut (jetzt veraltet ) für Elemente ist keine CSS-Sache. Es ist eine Reminiszenz an die Tage von damals.

Was die vertikale Ausrichtung betrifft, ist die Antwort leider "nein", zumindest in praktischer Hinsicht. Der Trick mit "margin: auto" funktioniert nicht. Vertikale Ausrichtung mit nichts als CSS ist herausfordernd, um es gelinde auszudrücken. Es gibt viele verschiedene Situationen und Techniken zu verwenden. Hier ist eine interessante (wenn auch etwas alte) Seite zum Thema: Ссылка

Edit from the future - Wer versucht, vertikale Zentrierung zu machen, sollte die Verfügbarkeit von Flexbox-Layout .

    
Pointy 06.03.2010, 13:20
quelle
12

text-align: center zentriert den Inhalt des Containers, während margin: auto den Container selbst zentriert.

Sie sollten vorsichtig mit margin:auto sein, da es in IE6 nicht unterstützt wird. In IE6 sollten Sie text-align:center für den äußeren Container festlegen und das CSS für den Container selbst auf text-align:left zurücksetzen.

    
Philippe Leybaert 06.03.2010 13:19
quelle
5

text-align=center verwendet, um den Inhalt (z. B. Text) an der Mitte auszurichten, jedoch wird margin: auto verwendet, um das Element selbst auf center auszurichten.

In älteren Browsern jedoch (IE) könnten Sie Elemente mit text-align:center auf die Mitte ausrichten.

Aber ich vermute, du meintest align=center wie im folgenden Beispiel:

%Vor%

Allerdings haben nicht alle Elemente align="center" , Sie müssen margin:0 auto verwenden, um für sie auszurichten.

Also,

Wenn Sie Inhalt eines Elements ausrichten möchten, sollten Sie Folgendes tun:

%Vor%

Wenn Sie das Element selbst ausrichten möchten, sollten Sie Folgendes tun:

%Vor%     
Sarfraz 06.03.2010 13:20
quelle

Tags und Links