Problem with input button, I can not center it HTML CSS

Navigation
0

Hi, I am learning CSS and I have a problem in centering a button of a form here I leave the code for you to see. Thank you very much!

HTML code: 

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

CSS Code: 

*{
    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;
}
    
asked by Lautaro Medina 24.08.2018 в 02:15
source

2 answers

0

Brother, the simplest way is to put the button inside a div with centered alignment 

   <div style="text-align:center">
      <input type="Submit" value="Enviar" name="btnEnviar">
    </div>
    
answered by 24.08.2018 / 02:26
source
0

In my experience, what I do is within the form, for each input, create a parent div with the class .input-field (or .input-field-50 if I want it to occupy half). With this I get absolute control over the inputs.

HMTL: 

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

CSS: 

.input-field,
.input-field-50 {
  text-align: center;
}
    
answered by 24.08.2018 в 08:55
Define correctly a variable to be read in all parts of the code the file_put_contents function does not work ... from php