Button nicht zentriert nach dem Verschieben nach unten von div

Question

Ich versuche, ein Formular zu erstellen, wo das Senden immer am unteren und in der Mitte ist.

Ich bin Zentrieren von text-align: center in der übergeordneten div verwenden und es auf den Boden mit position: absolute und bottom: 20px bewegen, aber es scheint, dass, nachdem ich tue, dass es etwas außerhalb der Mitte bewegt - warum dies so ist und wie ich dies tun beheben ?

HTML:

<div class='container'> 
    <form> 
    <p> 
     <input name='group 1' type='radio' id='1' /> 
     <label for='1'>option 1</label> 
    </p> 
    <p> 
     <input name='group 1' type='radio' id='2' /> 
     <label for='2'>option 2</label> 
    </p> 
    <p> 
     <input name='group 2' type='radio' id='3' /> 
     <label for='3'>option 1</label> 
    </p> 
    <p> 
     <input name='group 1' type='radio' id='4' /> 
     <label for='4'>option 1</label> 
    </p> 
    <button type='submit'> 
     Submit 
    </button> 
    </form> 
</div> 

CSS:

.container { 
    width: 400px; 
    height: 400px; 
    border: 2px solid red; 
    text-align: center; 
} 

button { 
    position: absolute; 
    bottom: 20px; 
} 

Demo: https://jsfiddle.net/f9ktLn9o/3/

Answer 1

Wo Sie es aus dem Stapel gezogen habe position: absolute; jetzt mit, es wird sein zentriert auf der linken Seite der Schaltfläche. Wenn Sie es um 50% der Breite der Schaltfläche nach links übersetzen, sollte das Problem behoben sein.

transform: translateX(-50%); 

https://jsfiddle.net/f9ktLn9o/4/

Answer 2

einen Blick auf Berechnete Arten Nehmen Sie in der Box-Modell definiert left und rightPosition Werte sehen.
Sie müssen diese Werte mit Ihren eigenen aufheben, mit einigen anderen Anpassungen erreichen Sie das beabsichtigte Verhalten.

Updated JSFiddle

Code Snippet Demonstration:

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 2px solid red; 
 
    text-align: center; 
 
    /* Additional */ 
 
    position: relative; /* position absolute child relative to parent */ 
 
} 
 

 
button { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    /* Additional */ 
 
    left: 0; 
 
    right: 0; 
 
    display: block; 
 
    margin: auto; 
 
    width: 100px; 
 
}

<div class='container'> 
 
    <form> 
 
    <p> 
 
     <input name='group 1' type='radio' id='1' /> 
 
     <label for='1'>option 1</label> 
 
    </p> 
 
    <p> 
 
     <input name='group 1' type='radio' id='2' /> 
 
     <label for='2'>option 2</label> 
 
    </p> 
 
    <p> 
 
     <input name='group 2' type='radio' id='3' /> 
 
     <label for='3'>option 1</label> 
 
    </p> 
 
    <p> 
 
     <input name='group 1' type='radio' id='4' /> 
 
     <label for='4'>option 1</label> 
 
    </p><button type='submit'> 
 
     Submit 
 
    </button> 
 
    </form> 
 
</div>

Answer 3

die Sie interessieren statt CSS:

button { 
    position: relative; 
    margin-top: 40%; 
} 

Es funktioniert für Chrome, Firefox, Edge und IE (nur diese getestet) Mit position: absolute; wird die Schaltfläche auf der Seite behoben, aber nicht in der div. Versuchen Sie immer, Prozent und nicht Pixel zu verwenden, wenn Sie können (responsive Design ist viel besser für Endbenutzer)