divで中央入力を水平に入力

Question

これは100回答えられたことは知っていますが、既存の解決策のどれも私のためには役に立たないようです。

divに入力フィールドを水平に配置したいと考えています。なぜ水平のセンタリングが苦痛なのですか？！？！？親divは画面サイズに基づいてサイズが変更される可能性があるため、余白の割合は機能しません。

HTML

<div class="select" id="avatar"> 
    <h4>Please enter your name.</h4> 
    <!-- Object i want to center--> 
    <div class="input-group"> 
     <input type="text" class="form-control text-center" id="playerName"> 
    </div> 

    <h4>And Select Your Ship</h4> 
    <img class="avatars" id="ship1" src="images/spaceship1.png"> 
    <img class="avatars" id="ship2" src="images/spaceship2.png"> 
    <img class="avatars" id="ship3" src="images/spaceship3.png"> 
    <img class="avatars" id="ship4" src="images/spaceship4.png"> 
    <button class="btn" id="submitPlayer">Submit</button> 
    </div> 

両親CSS

.select { 
     background-color: white; 
     z-index: 200; 
     padding: 0px 15px 0px 15px; 
     text-align: center; 
     font-family: 'Krona One', sans-serif; 
     border: medium dashed green; 
     margin-left: 25%; 
     margin-right: 25%; 
    } 

は私もこの1を中心にしたい、と私はそれが同じソリューションになると仮定し、それは体のほかに、親を持ちません。

<div class="input-group"> 
    <input class="text-center" type="text" id="word"> 
</div> 

Answer 1

ブートストラップのcenter-blockクラスを使用しない理由。

<div class="input-group center-block"> 
    <input class="center-block" type="text" id="word"> 
</div> 

http://www.bootply.com/sTboTk5CvU

Answer 2

入力とボタンはimgと似ていますが、ブロックとして表示して余白を使用できます。そう、彼らはつき幅/スペースの100％を使用せずに単独で真ん中に立つ：

.select { 
 
    background-color: white; 
 
    z-index: 200; 
 
    padding: 0px 15px 0px 15px; 
 
    text-align: center; 
 
    font-family: 'Krona One', sans-serif; 
 
    border: medium dashed green; 
 
    margin-left: 25%; 
 
    margin-right: 25%; 
 
} 
 
button.btn#submitPlayer { 
 
    display: block; 
 
    margin: auto; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="select" id="avatar"> 
 
    <h4>Please enter your name.</h4> 
 
    <!-- Object i want to center--> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control text-center" id="playerName"> 
 
    </div> 
 

 
    <h4>And Select Your Ship</h4> 
 
    <img class="avatars" id="ship1" src="images/spaceship1.png"> 
 
    <img class="avatars" id="ship2" src="images/spaceship2.png"> 
 
    <img class="avatars" id="ship3" src="images/spaceship3.png"> 
 
    <img class="avatars" id="ship4" src="images/spaceship4.png"> 
 
    <button class="btn" id="submitPlayer">Submit</button> 
 
</div>

、あなたが入力と同じことを行うことがあります。

.input-group, 
 
input#word.text-center{ 
 
    display: block; 
 
    margin: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="input-group"> 
 
    <input class="text-center" type="text" id="word"> 
 
</div>