居中在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發生的唯一最好的事情。

查看我的CodePen查看使用HTML的示例。

CSS的這3條線是最重要的：

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

編輯：我CodePen可能看起來不完全居中，但那是因爲height: 100vh並沒有真正在CodePen工作。但它將在CodePen之外工作。

編輯2：更新codepen

來源

2017-03-15 21:03:09

據actualy定心但現在的輸入是uncenterd https://ibb.co/eBTdmF當我加入.A-在於發梗{ 寬度：360像素; }，因爲如果不是文字會很小 – Itsmoloco

我更新了CodePen。這只是使用另一個FlexBox的問題。另外：請注意我是如何簡化HTML的。它讓我思考和設計清晰。即使是大型網站，簡單的HTML也是一個很好的選擇。另外，請隨意使用Bootstrap，但我更願意將其保持在最低限度。 –

你不能簡單地套用背景和邊框的.authform類或者你去一個不同的面貌？

.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

您正在使用引導程序進行輸入。 Bootstrap的列在每行中必須爲12。在你的情況下，你必須在每次輸入後添加一個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>

或

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

來源

2017-03-15 21:17:04

居中在CSS中的問題，HTML

回答

相關問題