CSS、HTMLのセンタリングに関する問題

-1

コンポーネントを完全に中央に配置することはできません。このフォームを真ん中に置いて動作させたいのですが、背景を完全に囲むことはできません。誰かが私に手を差し伸べることができる何百万というものを試した？ありがとうございます。CSS、HTMLのセンタリングに関する問題

HTML：

<!DOCTYPE html> 
     <html> 
     <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
      <link rel="stylesheet" type="text/css" href="css/style.css"> 
      <title>Accounts</title> 
     </head> 
     <body> 
      <div class="authform"> 
       <form class="my-form form-horizontal"> 
        <div class="color"> 
         <fieldset> 

          <label class="col-md-4 control-label" for="username"></label> 
          <div class="col-md-5"> 
           <center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center> 
          </div> 

          <br><br><br> 

          <label class="col-md-4 control-label" for="password"></label> 
          <div class="col-md-5"> 
           <center><input id="password" name="password" placeholder="Password" class="form-control input-md a-in" required="" type="password"></center> 
          </div> 

          <br><br><br> 

          <label class="col-md-4 control-label" for="send"></label> 
          <div class="col-md-4"> 
           <button id="send" name="send" class="btn">Auth</button> 
          </div> 

         </fieldset> 
        </div> 
       </form> 
      </div> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</body> 
</html>

はCSS：

.authform { 

    padding-top: 15%; 
    width: 50%; 
    margin: auto; 
    float: center; 

} 
.color { 

    margin: auto; 
    float: center; 
    background-color: #2ecc71; 
    border-radius: 25px; 
    border: 2px solid #2ecc71; 
    padding: 20px; 

}

出典

2017-03-15 Itsmoloco

たぶん、あなたは、CSSで、試みることができる：

text-align:center; 
margin-left:(half of the Pixels of the screen) 
margin-top:(half of the Pixels of the screen)

出典

2017-03-15 20:58:54

あなたがFlexBoxをしようとする場合があります。私の意見では、それは今までCSSに起こったことの一つです。

HTMLを使用した例については、CodePenを参照してください。 CSSの

これら3行は最も重要です。

display: flex; 
align-items: center; 
justify-content: center;

編集：私CodePenは完全に中央見ていないかもしれませんが、height: 100vhは本当にCodePenでは動作しないためです。しかし、それはCodePenの外で動作します。

編集2は：あなたは、単に.authformクラスに背景と境界を適用することができませんでした

出典

2017-03-15 21:03:09

<label class="col-md-3 control-label" for="username"></label> <div class="col-md-6"> <center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center> </div> <div class="col-md-3"></div>

それはactualyセンタリングされているが、今、入力iが.A-に添加した場合happed uncenterd https://ibb.co/eBTdmFある{ 幅：360px; }そうでない場合、テキストは小さくなるでしょう – Itsmoloco

私はCodePenを更新しました。それは別のFlexBoxを使用するだけの問題でした。また、HTMLをどのように簡略化したかに注意してください。それは私が思考し、明確に設計することができます。大規模なウェブサイトであっても、シンプルなHTMLは素晴らしい方法です。また、Bootstrapを自由に使うことができますが、私はそれを最小限に保つことを好みます。 –

をcodepen更新またはあなたは、異なる外観のために行くの？

.authform { 
    padding: 15% 20px 20px; 
    width: 50%; 
    margin: auto; 
    background-color: #2ecc71; 
    border-radius: 25px; 
    border: 2px solid #2ecc71; 
}

出典

2017-03-15 21:03:28 RogueRyan

あなたの入力にはブートストラップが使用されています。ブートストラップの列はすべての行で12でなければなりません。あなたの場合、すべての入力の後に1つのdivを追加する必要があります。

<label class="col-md-4 control-label" for="username"></label> 
<div class="col-md-4"> 
    <center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center> 
</div> 
<div class="col-md-4"></div>

又は

出典

2017-03-15 21:17:04

CSS、HTMLのセンタリングに関する問題

答えて

関連する問題