ボタンをdivの最下部に移動した後にセンタリングしない

Question

私は、送信が常に下部と中央にあるフォームを作成しようとしています。

私は、親のdivにtext-align: centerを使用することにより、センタリングやposition: absoluteとbottom: 20pxで下に移動するが、それは後に、私はそれが中心からずれわずかに動くことをやるようですよ - なぜこのような場合であるとどのように私はこの問題を解決します？

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; 
} 

デモ：あなたはposition: absolute;を使用して、スタックからそれを引っ張ってきたどこhttps://jsfiddle.net/f9ktLn9o/3/

Answer 1

それは今だろうボタンの中央に配置されます。ボタンの幅の50％を左に翻訳すると、問題が解決するはずです。あなたはボックスモデルで定義されleftとright位置値が表示されます計算さのスタイルを見てみると

transform: translateX(-50%); 

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

Answer 2

。
これらの値を自分で設定する必要がありますが、これ以外の調整を加えることで、意図した動作を達成できます。

Updated JSFiddle

コードスニペットデモンストレーション：

.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

代わりにCSSの本をお試しください：

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

これはクロム、Firefox、エッジとIE（ちょうどこれらをテストした）のために働く position: absolute;を使用することによって、ボタンはページに固定されていますが、divに固定されていません。 できるだけパーセンテージを使用し、ピクセルではないようにしてください（レスポンシブデザインはエンドユーザーにとってより良い方法です）