时间戳

首页 > 解决方案 > 如何将我的“记住我”复选框与中心对齐？

html - 如何将我的“记住我”复选框与中心对齐？

问题描述

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

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

标签： htmlcsscheckbox

解决方案

在 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;
}

推荐阅读