我有一些简单的东西,但由于某种原因我无法实现它。正如标题所说,我无法将 HTML 表单的元素居中。我想看看他们能不能帮我一把。这里的代码:
<body>
<object id="header" data="header.html" onload="resizeObj(this);"></object>
<form id="formulario" action="enviado.php" method="post">
<div id="content">
<label>Nombre</label><br>
<input id="nombre" name="nombre" type="text" /> <br>
<label>Email</label><br>
<input id="email" name="email" type="text" /> <br>
<label>Contenido</label><br>
<textarea id="contenido" name="comment" cols="30" rows="5">Ingresa aqui el mensaje...</textarea><br>
<input id="campo3" name="enviar" type="submit" value="Enviar" />
</div>
</form>
<object id="footer" data="footer.html" onload="resizeObj(this);" ></object>
</body>
和CSS:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
padding: 0px;
margin: 0px;
border:none;
width: 100%;
}
#header{
width: 100%;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#footer{
position: fixed;
bottom:0;
left:0;
width: 100%;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#formulario{
margin: 0 auto;
align-content: center;
border-radius: 10px;
border: 1px solid #666666;
width: 500px;
}
label {
font-weight: bold;
color: #444;
font-size: 14px;
}
input {
font-size: 14px;
}
input[type="text"] {
border-radius: 5px;
margin: 10px 0;
background: #fff;
border: 1px solid #ccc;
color: #777;
max-width: 100%;
outline: none;
padding: 7px 8px;
}
input[type="submit"] {
border-radius: 5px;
margin: 10px 0;
background: #0088B2;
color: #fff;
padding: 8px 14px;
font-weight: bold;
border: none;
cursor: pointer;
}
textarea{
border-radius: 5px;
margin: 10px 0;
background: #fff;
border: 1px solid #ccc;
color: #777;
max-width: 100%;
outline: none;
padding: 7px 8px;
}
input[type="submit"]:hover {
background: #444;
}
我认为您使用了错误的属性,在这种情况下您需要的表单是text-align而不是align-content(这是 flexbox 容器的属性):
我还会推荐另外两个解决方案。
第一个是向表单添加填充并为输入元素添加 100% 的宽度,它不会居中,但看起来会非常好。
示例:https ://jsfiddle.net/ttbeobLm/
第二个选项类似,但通过在表单内添加一个容器,向容器添加宽度,并将其居中。
示例:https ://jsfiddle.net/ttbeobLm/1/
将表单放入带有类的 div 中,并将其设置为 float none
我还建议您使用引导程序,并且当您使用 resize: none 放置类或样式时,它会更漂亮和风格化。(在引导程序中,您为各种元素预定义了类,例如,对于输入,您拥有使输入非常好的表单控制类)
要使表单的元素居中 (
inputs
和labels
),您可以text-align: center
按照之前的说明使用。但是,由于您正在使用它,因此您也可以通过直接在表单上调用它
Bootstrap
来使用预定义类。Bootstrap
text-center
您实际上可以在 and 上使用
text-align: center
or ,因为它们具有默认属性,这使得它们被视为文本,因此可以居中。text-center
inputs
label
display: inline
如果表单中包含的元素具有属性
display: block
,则它们将不会以先前命名的属性为中心。此外,您应该从 CSS 中删除该属性
align-content: center;
,因为它只有在您将display: flex
(flexbox) 属性设置为表单时才会生效。您更正的示例: