loginButtonが水平に中央揃えされていないのはなぜですか？

Question

私のコードは次のとおりです。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    background-image: url("images/indexBg.jpg"); 
 
    background-attachment: fixed; 
 
} 
 
#container { 
 
    padding: 50px; 
 
    margin: 50px; 
 
    background-color: #cccfe8; 
 
    opacity: 0.9; 
 
} 
 
#login { 
 
    width: 20%; 
 
    height: 15%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    padding: 10px; 
 
    background-color: #cccfe8; 
 
    opacity: 0.9; 
 
} 
 
#login label { 
 
    text-align: right; 
 
    padding-right: 20px; 
 
    display: inline-block; 
 
    min-width: 100px; 
 
} 
 
#loginButton { 
 
    display: block; 
 
    margin: auto; 
 
} 
 
.inp { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 
#login>p { 
 
    margin: 0px auto; 
 
    margin-top: 10px; 
 
}

<div id="login"> 
 
    <h1>Login</h1> 
 
    <p> 
 
    <div class="inp"> 
 
     <label for="uid">Username :</label> 
 
     <input type="text" id="uid"> 
 
    </div> 
 
    <br> 
 
    <div class="inp"> 
 
     <label for="pass">Password :</label> 
 
     <input type="password" id="pass"> 
 
    </div> 
 
    <br> 
 
    <div id="loginButton" class="inp"> 
 
     <input type="submit" name="submit" value="Log In"> 
 
    </div> 
 
    </p> 
 
</div>

loginButtonは余裕がautoに設定されていても、水平方向の中央されていないのはなぜ？

修正するために何をする必要がありますか？

また、すべての要素（両方の内部divを含む）を水平に配置する方法はありますか？この問題に取り組む最善の方法は何ですか？

Answer 1

login { 
    width: 20%; 
    height: 25%; // make it 25% from 15%. 
    text-align: center; //add this tag to your css code.hope it will help you. 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    margin: auto; 

    padding: 10px; 
    background-color: #cccfe8; 
    opacity: 0.9; 
} 

Answer 2

#loginButton#loginButtonの中にあります（私はあなたが中心にしようとしているものと仮定しています）。

#loginButton { 
    text-align:center; 
} 

正直言って、あなたのCSSにはそれほど偉大な慣行はありません。 position: absoluteは必須ではありません（したがって、top,left、bottom、rightのいずれのプロパティもありません）。なぜ#loginに幅と高さを指定しているのかわからないのですが、#loginにすべてを集中したい場合は、padding-rightが#login labelにある理由がわかりません。

は大幅にコードを簡素化し、それは次のようになります。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-image: url("images/indexBg.jpg"); 
 
    background-attachment: fixed; 
 
} 
 

 
#container { 
 
    padding: 50px; 
 
    margin: 50px; 
 
    background-color: #cccfe8; 
 
    opacity: 0.9; 
 
} 
 

 
#login { 
 
    text-align:center; 
 
    padding: 10px; 
 
    background-color: #cccfe8; 
 
    opacity: 0.9; 
 
} 
 

 
#login label { 
 
    text-align:right; 
 
    display:inline-block; 
 
} 
 

 
#loginButton { 
 
    display: block; 
 
    margin: auto; 
 
    text-align:center; 
 
}

<div id="login"> 
 
     <h1>Login</h1> 
 
      <div class="inp"> 
 
       <label for="uid">Username : </label> 
 
       <input type="text" id="uid"> 
 
      </div> <br> 
 
      <div class="inp"> 
 
       <label for="pass">Password : </label> 
 
       <input type="password" id="pass"> 
 
      </div> <br> 
 
      <div id="loginButton" class="inp"> 
 
       <input type="submit" name="submit" value="Log In"> 
 
      </div> 
 
    </div>

をまた、あなたはそれらの入力上のフィールドのラベルを持つようにしたい場合は、単に{ display:block; }をする#login labelを変更し、削除しますtext-align:right

Answer 3

あなたの#login IDの身長は15％です。 IDに任意の高さを使用しないでください。追加のテキストボックスやプロパティを追加すると高さに影響します。

いずれにしても、高さを指定すると、ボックスが特定の高さにのみ表示されるため、ボックスの高さを少し増やすことができます。

変更コードは：

#login { 
width: 20%; 
height: 30%; 
text-align:center; 
} 

Answer 4

CSSで#loginButtonのスタイルを追加してください：

text-align:center; 

または 幅：は50px;

おかげで...水平方向の位置合わせのための

Answer 5

は `flexbox`を学び始める、それは2016年です

<div id="wrapper" style="text-align: center">  
    <div id="yourdiv" style="display: inline-block;">You text</div> 
</div>