I'm with something simple, but for some reason I can't achieve it. As the title says, I can't center the elements of an HTML form. I wanted to see if they could give me a hand. Here the code:
<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>
And the 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;
}
I think you're using the wrong property, the one you need in this case for the form is text-align instead of align-content (which is a property of a flexbox container):
I would also recommend two other solutions.
The first is to add padding to the form and add 100% width to the input elements, it wouldn't center but it would look very nice.
Example: https://jsfiddle.net/ttbeobLm/
The second option is similar, but by adding a container inside the form, adding a width to the container, and centering it.
Example: https://jsfiddle.net/ttbeobLm/1/
Put the form inside a div with a class and set it to float none
I also recommend that you work with bootstrap and that when you put a class or a style with resize: none it is more beautiful and stylized. (in bootstrap you have predefined classes for all kinds of elements, for example for the inputs you have the form-control class that makes the inputs very nice)
To center the elements of your form (
inputs
andlabels
) you can usetext-align: center
as you have been told before.However, since you are using
Bootstrap
it you can also use the predefined class byBootstrap
calling ittext-center
directly on the form.You can actually use
text-align: center
ortext-center
on theinputs
andlabel
because they have the default propertydisplay: inline
which makes them be treated as if they were text and therefore can be centered.If the elements contained in the form had, failing that, the property
display: block
, they would not be centered with the previously named properties.Also, you should remove the property
align-content: center;
from your CSS as it would only take effect if you had set thedisplay: flex
(flexbox) property to the form.Your corrected example: