Search code examples
javascriptcssoverlaycas

How to center the login form in cas overlay?

I am new to thymeleaf and I want to customize my own login in CAS Overlay I have followed a tutorial:

https://dacurry-tns.github.io/deploying-apereo-cas/ui_develop_update-the-login-view.html

but my house always has a suggestion on the left? they think I should bring the css (cas.css); If so, what should be changed and how to do it? the code used for the loginform.html is:

https://www.codepile.net/pile/52o3by2a

and the Layout is:

https://www.codepile.net/pile/GoPnWqyE

enter image description here

Solution

  • I dont have any idea about CAS but you can align your form using following way see if it works for you

    add class form-containerto your form's parent div and 

    .form-container{
        width: 300px;
        margin: 0 auto;
        float: none;
    }  


    .form-container{
    	width: 300px;
        margin: 0 auto;
        float: none;
    }  
    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Form Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">

  <div class="form-container">	
    <h3>Vertical (basic) form</h3>
    <form action="/action_page.php">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
      <div class="checkbox">
        <label><input type="checkbox" name="remember"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>


</div>

</body>
</html>