如何在 cas 覆盖中居中登录表单?

我是 thymeleaf 的新手,我想在 CAS Overlay 中自定义我自己的登录,我遵循了一个教程:

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

但是我家总是在左边有建议?他们认为我应该带上 css (cas.css);如果是这样,应该改变什么以及如何做?用于 loginform.html 的代码是:

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

布局是:

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

http://img3.mukewang.com/62d0ca590001ce8106550295.jpg

慕妹3146593
浏览 151回答 2
2回答

江户川乱折腾

我对 CAS 没有任何想法,但您可以使用以下方式对齐您的表格,看看它是否适合您将类添加form-container到表单的父 div 和.form-container{&nbsp; &nbsp; &nbsp; &nbsp; width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; float: none;&nbsp; &nbsp; }&nbsp;&nbsp;.form-container{&nbsp; &nbsp; &nbsp; &nbsp; width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; float: none;&nbsp; &nbsp; }&nbsp;&nbsp;<!DOCTYPE html><html><head>&nbsp; <title>Form Example</title>&nbsp; <meta charset="utf-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"></head><body><div class="container">&nbsp; <div class="form-container">&nbsp;&nbsp;&nbsp; &nbsp; <h3>Vertical (basic) form</h3>&nbsp; &nbsp; <form action="/action_page.php">&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label for="email">Email:</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label for="pwd">Password:</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; <label><input type="checkbox" name="remember"> Remember me</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <button type="submit" class="btn btn-default">Submit</button>&nbsp; &nbsp; </form>&nbsp; </div></div></body></html>

白板的微信

看起来您使用的 Thymeleaf 模板包括 Bootstrap 4。对吗?由于没有可查看的实时代码示例,因此很难确切地弄清楚如何产生您想要的结果。也就是说,我会尝试将您的元素的直接子.row元素(在登录片段文件中)放入一个 flex 容器本身,并使用 Bootstrap 4 的 flexbox 实用程序之一将其居中;具体来说,您应该添加d-flex justify-content-center(分别是 CSS 本机display: flex和的 Bootstrap 的别名justify-content: center。所以:&nbsp; <main role="main" class="container mt-3 mb-3">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="col-md d-flex justify-content-center">&nbsp; &nbsp; &nbsp; &nbsp; <div class="my-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MY CONTENT&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </main>在此处查看 Codepen
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript