Question 247844 in Html Question posted in
Some basic documentation can be found here.

Html – How to align the input button of a form in the center?

I want to center align the input of a form.

However, it is a project where there are multiple scss files and I don’t want to break it.

I need to try to align it only by modifying the CSS that I show you here, so that it does not affect other elements of the form screen.
The form will not look very good since we use scss and there are variables not included in the code.

Now the input is left aligned.

I have tried the following code:

display: flex; 
justify-content: space-between; 
align-items: center;

However it doesn’t work, the input button is still aligned to the left.

Maybe the example I show is little

.formulario {
    margin-top: 5rem;
    width: 100%;
}

.campo {
    display: flex;
    margin-bottom: 2rem;
    align-items: center;
    label {
        flex: 0 0 10rem;
    }
    input {
        flex: 1;
        border: none;
        padding: calc(v.$separacion / 4);
        border-radius: 1rem;

        &:disabled {
            background-color: lighten(v.$negro, 30%);
            color: v.$blanco;
            cursor: not-allowed;
        }
    }
}

.boton {
    @include m.boton(v.$azul, v.$blanco);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boton-eliminar {
    @include m.boton(v.$rojo, v.$blanco);
}
<h1 class="nombre-pagina">LOGIN</h1>
<p class="descripcion-pagina">Inicia sesion con tus datos</p>

<form class="formulario" method="POST" action="/">
  <div class="campo">
    <label for="email">Email</label>
    <input 
      type="email"
      id="email"
      placeholder="Tu Email"
      name="email"
    >
  </div>

  <div class="campo">
        <label for="password">Password</label>
        <input 
            type="password"
            id="password"
            placeholder="Tu Password"
            name="password"
        />
    </div>

    <input type="submit" class="boton" value="Iniciar Sesión">

</form>



<div class="acciones">
    <a href="/crear-cuenta">¿Aún no tienes una cuenta? Crear una</a>
    <a href="/olvide">¿Olvidaste tu password?</a>
</div>
Tags:

2

Answers


  1. 0 
    <style>
.boton {
  display: block;
  margin: auto;
}
</style>

    This will align the submit button to the center. The display: block; property makes the element behave like a block-level element, and the margin: auto; property automatically adjusts the left and right margins and aligns the element horizontally in the center.

    Login or Signup to reply.
  2. 0

    If you want to bring your all input in center then you have to simply give the css to your form text-align:center;

    .formulario{
  text-align:center; 
}

    And if you want to only align center your submit button then give it to margin:auto

    .boton{
    margin:auto;
  }

    Hope so your code will execute properly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search