如何将表格居中HTML和CSS
我在这里有一个网站: 如您所见,表单尚未居中 “用户名”、“密码”、“记住我”居中,必须与文本左对齐 我想将表单居中,然后文本左对齐用户名、密码和“记住我”标签..使用inspect element工具如何做到这一点 以下是我的CSS:如何将表格居中HTML和CSS,html,css,Html,Css,我在这里有一个网站: 如您所见,表单尚未居中 “用户名”、“密码”、“记住我”居中,必须与文本左对齐 我想将表单居中,然后文本左对齐用户名、密码和“记住我”标签..使用inspect element工具如何做到这一点 以下是我的CSS: @import url(https://fonts.googleapis.com/css?family=Roboto:300); .login-page { width: 360px; padding: 8% 0 0; margin: auto;
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #dd374d;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
body {
background: #ecf0f1; /* fallback for old browsers */
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-heading{ display: none; }
请帮忙 删除文本对齐:居中;从这一类中—
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
并将此CSS添加到“记住我”复选框width:auto代码>
避免使用元素级CSS特性,例如:。表单输入
始终使用类
阅读更多有关CSS特性的信息:
MDN:
和特异性计算器:您可以删除
文本对齐:居中
来自表单元素。用于标签中的文本。
.form label{width:100%;text-align:left;}
如果将
更改为
,则表单将居中。
干杯 删除文本对齐:居中表单表单类
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
并将col-md-9
类从div
中移除,该div具有内容
作为ID
<div id="content" class="col-md-9" role="main">
从class表单中删除文本对齐:居中,并将class-ub div从col-md-9
更改为col-md-12
<div id="content" role="main" class="col-md-12">
....
</div>
变更编号1-
<div id="content" class="col-md-9" role="main"></div> to
<div id="content" class="col-md-12" role="main"></div>
.login-remember label{ width: 100%;}
.form .login-remember input{width: auto;}
第3项更改-添加以下Css-
<div id="content" class="col-md-9" role="main"></div> to
<div id="content" class="col-md-12" role="main"></div>
.login-remember label{ width: 100%;}
.form .login-remember input{width: auto;}
事实上,表单本身位于其容器的中心,成为一个完整的成员…
请将答案标记为已接受,以便其他人知道问题已解决。因为CICAD3301页面使用相同的css,这里还有其他人吗?