即使设置显示：块后，文本对齐：中心也不起作用
我正在尝试将表单内容居中。但即使在为表单容器设置 display:block 然后应用 text-align:center; 我又做了另一项工作 put padding:0 33% 它使表单内容居中但是使用不同的视图端口大小，它会缩小文本框的大小。我想将表单元素居中并希望它们占据容器大小，请解释为什么会发生这种情况以及我忽略了什么。我希望它能够工作所有视图端口尺寸。我想知道导致此问题的原因甚至覆盖内联代码
CSS
#Banner{
background:url('http://i67.tinypic.com/midkki.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
min-height:960px;
}
#Menu{
min-height:120px;
}
body,html{
padding:0;
margin:0;
}
.nopm{
padding:0;
margin:0;
}
#Menu ul{
padding:0;
margin:0;
}
#Menu li{
list-style:none;
float:left;
padding:1em .3em;
float:left;
margin:2em 0;
}
#Menu a{
text-decoration:none;
font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: 28px;
color:#fff;
margin:1em .5em;
padding:10px;
border:2px solid #fff;
}
a:hover{
border:4px solid #FFD700;
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
@media (max-width:420px){
li{
width:100%;
text-align:center;
}
img{
display:block;
width:90px;
height:90px;
margin:0 auto;
}
}
h1,h3{color:#fff;
text-align:center;
}
#Slogan
{
padding:2em 0;
}
#SignUpWrapper{
width:100%;
text-align: center;
display:block;
}
form{
width:100%;
}
input[type="text"],[type="email"],[type="password"]{
font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif;
font-size: 19px;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: 25px;
color:#000 !important;
padding:.5em;
width:100%;
}
超文本标记语言
<body>
<div id="Banner">
<div id="Menu">
<div class="row nopm">
<div class="col-lg-3 col-md-3 col-sm-2">
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
<img src="http://i66.tinypic.com/xpon69.png" />
</div>
<div class="col-lg-3 col-md-1 col-sm-1">
</div>
<div class="col-lg-3 col-md-5 col-sm-7">
<ul>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-1">
</div>
</div>
</div>
<div id="Slogan">
<div class="row nopm">
<div class="col-lg-4 col-xs-12">
</div>
<div class="col-lg-4 col-xs-12">
<h1>
Welcome to Meet Up Place
</h1>
<h3>
SignUp to create your own events
</h3>
</div>
<div class="col-lg-4 col-xs-12">
</div>
</div>
</div>
<div id="SignUp">
<div class="row nopm">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div id="SignUpWrapper">
<form autocomplete="on">
<div class="InputWrapper">
<div class="input-group">
<label for="fName" style=" display: block;text-align:center;">First Name</label>
</div>
<div class="input-group">
<input class="form-control" id="fName" type="text" placeholder="First Name" >
</div>
</div>
<div class="InputWrapper">
<div class="input-group">
<label for="lName">Last Name</label>
</div>
<div class="input-group">
<input id="lName" type="text" placeholder="Last Name" />
</div>
</div>
<div class="InputWrapper">
<div class="input-group">
<label for="lName">E-Mail</label>
</div>
<div class="input-group">
<input id="lName" type="email" placeholder="E-Mail" />
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
</div>
</div>
</div>
</div>
</body>
戴上然后display: inline-block;取下，它就可以工作了。width: 100%;form
如果您想将内部内容居中，请尝试以下操作：
.input-group { display: block !important; }
.form-control, input[type="text"], [type="email"], [type="password"] { text-align : center !important;}
我使用!important该样式是因为样式位于 HTML 面板而不是 CSS 面板中。
您的内联样式已应用：
