Schaltfläche wird nicht im Container auf Blockebene zentriert

Question

Warum wird eine Schaltfläche in einem flex Container zentriert, indem margin : 0px auto; verwendet wird, aber eine Schaltfläche in einem normalen Container platziert ist nicht?

auch, was kann ich den Knopf im normalen Behälter zum Zentrum zu tun (ich kann nicht meinen HTML ändern, so dass eine CSS-Lösung würde geschätzt.)

.flex-container { 
 
    display: flex; 
 
    background: yellow; 
 
} 
 
.normal-container { 
 
    background: green; 
 
} 
 
button { 
 
    margin: 0px auto; 
 
}

<div class="flex-container"> 
 
    <button>Button in flex</button> 
 
</div> 
 
<div class="normal-container"> 
 
    <button>Button in normal</button> 
 
</div>

jsFiddle Link: https://jsfiddle.net/r8h3d9wy/1/

Answer 1

text-align:center auf dem übergeordneten als Eingaben/Schaltflächen sind Inline-Level-Elemente.

margin:0 auto in Flex-Containern funktioniert, weil die Ausrichtung auf Flex-Items funktioniert. Es entfernt effektiv die Inline-Level-Natur und macht es zu einem Flex-Kind.

.flex-container { 
 
    display: flex; 
 
    background: yellow; 
 
    justify-content: center; 
 
} 
 
.normal-container { 
 
    background: green; 
 
    text-align: center; 
 
}

<div class="flex-container"> 
 
    <button>Button in flex</button> 
 
</div> 
 
<div class="normal-container"> 
 
    <button>Button in normal</button> 
 
</div>

Answer 2

In normalen Behälter, margin: 0px auto wird nur angewendet, Elemente zu blockieren. Versuchen Sie Folgendes:

button { 
    display: block; 
    margin: 0px auto; 
} 

Normalerweise haben Blockelemente standardmäßig eine Breite von 100%. In diesem Fall ist das kein Problem, da Sie eine Schaltfläche verwenden. Andernfalls müssten Sie die Breite festlegen, um das Element zu zentrieren.

Answer 3

Wenn Sie die berechneten Stile in Chrome überprüfen, werden Sie feststellen, dass die untergeordneten Elemente im Flex-Container display:block haben, während die untergeordneten Elemente im normalen Container display:inline-block haben. Wenn Sie display:block dem CSS für die Schaltfläche hinzufügen, wird es in beiden Containern zentriert.

Answer 4

Mit Inline-Elemente, wie button, margin-left: auto und margin-right: auto Rechen auf 0.

10.3.1 Inline, non-replaced elements

Die width Eigenschaft gilt nicht. Ein bestimmte Wert von auto für left, right, margin-left oder margin-right wird ein berechneter Wert von 0.

können Sie das Zentrum button Element von:

1. Anwendung text-align: center dem Mutter (demo), OR
2. Umschalten auf display: block auf die Schaltfläche (demo).

Im Flex-Container, arbeiten Sie ein in flex formatting context, die blockifies flex Produkte und ermöglicht Ausrichtung mit auto margins.

Answer 5

Der folgende CSS-Code würde den Trick machen. Ich habe Erklärungen mit Kommentaren gemacht.

Eine Anzeige: Blockelement belegt den gesamten Raum rechts oder links davon im übergeordneten Container. Also, Marge: Auto tut nichts, da es keine Marge gibt. Wenn Sie es zu einem Inline-Element machen, ändert sich dies und die Margen werden frei, so dass Margin: Auto funktioniert.