7

Estoy con algo sencillo, pero que por alguna razon no puedo lograr. Como dice el titulo, no puedo centrar los elementos de un formulario HTML. Queria ver si me podian dar una mano. Aca el codigo:

<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>

Y el 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;
}

Aca una captura de como queda el sitio: introducir la descripción de la imagen aquí

5 respuestas 5

8

Creo que estás usando la propiedad incorrecta, la que necesitas en este caso para el formulario es text-align en vez de align-content (la cual es una propiedad de un contenedor flexbox):

*{
  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;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #666666;
    width: 500px;
}
<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>

4
  • OMG. Que noob lo mio jaja. Muchas gracias, con eso anduvo :) Tengo que esperar unos minutos para marcarla como respuesta correcta. Gracias! ;) Commented el 3 oct. 2016 a las 18:31
  • 1
    no te preocupes hermano, aquí todos aprendemos siempre y compartimos con la mejor de las intenciones :D dale con todo el power 2.0!
    – fredyfx
    Commented el 3 oct. 2016 a las 18:32
  • 1
    @FacundoCurti considera marcar ésta respuesta como correcta.
    – gugadev
    Commented el 4 oct. 2016 a las 16:25
  • Agradezco el comentario por el voto negativo.
    – Shaz
    Commented el 26 oct. 2016 a las 10:30
1
#formulario{
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #666666;
    width: 500px;
}
1

Pon el formulario dentro de un div con una clase y le pones float none

<div class="centrar-form">
  <form>tus formularios</form>
</div>

.centrar-form{
 margin: 50px auto;
 float:none;
}

además te recomiendo que trabajes con bootstrap y que al le pongas una clase o un style con resize:none queda más bonito y estilizado. (en bootstrap tienes clases predefinidas para todo tipo de elementos, como por ejemplo para los inputs tienes la clase form-control que te deja los inputs bien bonitos)

1

Te recomendaría también otras dos soluciones.

La primera es agregar un padding al formulario y agregar un 100% de ancho a los elementos input, no centraría pero daría una muy buena apariencia.

form {
  padding: 30px;
}

form input, form textarea {
  display: block;
  width: 100%;
}

Ejemplo: https://jsfiddle.net/ttbeobLm/

La segunda opción es similar, pero agregando un contenedor dentro del form, agregarle un ancho al contenedor, y centrarlo.

form {
  padding-bottom: 20px;
  padding-top: 20px;
}
form .content {
  margin: 0 auto;
  width: 90%;
}

form input, form textarea {
  display: block;
  width: 100%;
}

Ejemplo: https://jsfiddle.net/ttbeobLm/1/

1
  • Conversación trasladada a sala de chat.
    – user227
    Commented el 27 dic. 2016 a las 21:55
0

Para centrar los elementos de tu formulario (inputs y labels) puedes usar text-align: center como te han comentado anteriormente.

Sin embargo, ya que estás usando Bootstrap también puedes usar la clase predefinida por Bootstrap llamada text-center directamente sobre el formulario.

<form id="formulario" action="enviado.php" method="post" class="text-center">

Realmente puedes usar text-align: center o text-center sobre los inputs y las label debido a que tienen por defecto la propiedad display: inline lo que hace que sean tratados como si fueran texto y por tanto que se puedan centrar.

Si los elementos que contuviera el formulario tuvieran, en su defecto, la propiedad display: block, no se centrarían con las propiedades nombradas anteriormente.

Además, deberías eliminar la propiedad align-content: center; de tu CSS ya que sólo tendría efecto si hubieras puesto la propiedad display: flex (flexbox) al formulario.

Tu ejemplo corregido:

*{
  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;
    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;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <object id="header" data="header.html" onload="resizeObj(this);"></object>

            <form id="formulario" action="enviado.php" method="post" class="text-center">
                <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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.