如何将我的“记住我”复选框与中心对齐？ [关闭]答案

【问题标题】：how to align my "remember me" check box to the center? [closed]如何将我的“记住我”复选框与中心对齐？ [关闭]
【发布时间】：2020-11-10 03:49:01
【问题描述】：

我试图将我的复选框和标签对齐到屏幕的中心，但它根本没有移动。我试图把它放在容器标签中，但它导致复选框的标签没有对齐。有人可以帮忙解决这个问题吗？

.container {
  width: 350px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<!DOCTYPE html>
<html lang= "en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv= "X-UA-Compatible" content = "IE=edge">
    <meta name= "viewport" content = "width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>

<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>

<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>

<form>  
<label>
<input type="checkbox" checked>
Remember me 
</label>
</form>






<div class="container">     
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>

</body>



    



            
</html>

【问题讨论】：

HTML 结束标签丢失，代码完全混乱！。所需的编辑和格式化

标签： html css checkbox

【解决方案1】：

在 HTML 中为您的标签添加一个类：

    <!DOCTYPE html>
<html lang= "en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv= "X-UA-Compatible" content = "IE=edge">
    <meta name= "viewport" content = "width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>

<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>

<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>

<form>  
<label class = "checkbox">
<input  type="checkbox" checked>
Remember me 
</label>
</form>

<div class="container">     
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>

</body>

            
</html>

然后在您的 CSS 中将其向右移动：

   .container {
  width: 350px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

.checkbox {
  left: 250px;
}

【讨论】：

【解决方案2】：

有两种方法可以做到这一点：

使 div 标签中心包含标签复选框。
设置标签全宽和文本中心

【讨论】：

【解决方案3】：

.container {
  width: 350px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}
/* add this style */
label {
  display: flex !important; 
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="login.css">
</head>

<body>

  <div class="container">
    <form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
      <div class="form-group"></div>
      <input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>

      <div class="form-group"></div>
      <input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
  </div>

  <form>
    <label>
<input type="checkbox" checked>
Remember me 
</label>
  </form>






  <div class="container">
    <p>
      <div class="form-group">
        <input type="submit" name="login" class="btn btn-block">
    </p>
    </div>

</body>








</html>

【讨论】：