0

Hola estoy aprendiendo css y tengo un problema al centrar un botón de un formulario acá dejo el código para que vean. Muchas gracias!

codigo HTML :

<body>
    <footer>
        <section class="contacto">
            <h2>Contacto</h2>
            <form class="contacto" action="">
                <input type="text" placeholder="Nombre:" maxlength="25" required name="nombre">
                <input type="email" placeholder="Email:" maxlength="40" required name="email">
                <br/>
                <textarea name="mensaje" id="mensaje" placeholder="Mensaje:"></textarea>
                <br>
                <input type="Submit" value="Enviar" name="btnEnviar">

            </form>
        </section>
        <section class="redes-sociales">

        </section>
    </footer>
</body>

Codigo CSS:

*{
    padding: 0;
    margin:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*PAra el formulario*/
.contacto{
    background: #fff;
    width: 500px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;

}
/*Para los input del nombre y del email */
.contacto input[type="text"],
.contacto input[type="email"],
.contacto textarea{
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px solid #226fc1;
    font-family: Arial;
    font-size: 16px;
}

.contacto textarea{
    min-height: 120px;
    max-height: 300px;
    min-width: 100%;
    max-width: 100%;
}
/*Cuando hacemos focus en los input de texto, email y el area de texto va a agregarse un marco para saber en que ventana esta el usuario*/
.contacto input[type="text"]:focus,
.contacto input[type="email"]:focus,
.contacto textarea:focus{
    border: 2px solid #43ce98;
}
/*para el boton*/
.contacto input[type="submit"]{
    width: 200px;
    margin: 0 auto;
    background: none;
    border: 1px solid #43ce98;
    color:#43ce98;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 3px;

}
/*cuando el usuario pase el puntero por encima del boton se va a rellenar con color*/
.contacto input[type="submit"]:hover{
    background: #43ce98;
    color: #fff;
}
4
  • Brother, copia y pega tu código porque es más fácil que estar leyendo una imagen. Así te podríamos ayudar Commented el 24 ago. 2018 a las 0:16
  • ok es mi primera vez, gracias por contestar. Ahí lo edito. Commented el 24 ago. 2018 a las 0:19
  • Selecciona todo lo que es código y luego haz clic en las llaves { } para que te lo reconozca como código Commented el 24 ago. 2018 a las 0:23
  • Muchas gracias Hugo! Ahí lo edite! Commented el 24 ago. 2018 a las 0:25

2 respuestas 2

0

Brother, la forma más sencilla es meter el botón dentro de un div con alineación centrada

   <div style="text-align:center">
      <input type="Submit" value="Enviar" name="btnEnviar">
    </div>
3
  • Muchas gracias Hugo funciono! esta forma es correcta a la hora de programar y que siga las reglas? Commented el 24 ago. 2018 a las 0:29
  • Lo que yo haría es crear una clase llamada "text-center" por ejempo, y así la llamo cada vez que necesite centrar el contenido. Si te funcionó, puedes votar a favor de la respuesta ;) Commented el 24 ago. 2018 a las 0:30
  • ok voy a intentar resolver eso, muchísimas gracias, si apreté en la flecha hacia arriba pero como no tengo 15 de reputación no cambia la puntuación :/. Commented el 24 ago. 2018 a las 0:32
0

En mi experiencia, lo que hago es dentro del formulario, para cada input, crear un div padre con la clase .input-field (o .input-field-50 si quiero que ocupe la mitad). Con esto consigo tener control absoluto sobre los inputs.

HMTL:

<form>
  <div class="input-field">
    <label>Usuario:</label>
    <input name="username"/>
  </div>
</form>

CSS:

.input-field,
.input-field-50 {
  text-align: center;
}
1
  • Hoal Moises! me alegra que tomases tu tiempo para contestar y ayudar. Podrías aclarar mas tu respuesta? No se entiende muy bien que relación tiene tu respuesta con la pregunta, ni cual es la solución que propones. Aqui te dejo como responder por si te ayuda.
    – Txmx
    Commented el 24 ago. 2018 a las 7:27

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.