0

Quiero alinear el input de un formulario para alinearlo en el centro. Sin embargo es un proyecto en el que hay varios archivos de scss y no quiero romperlo. El formulario no se vera del todo bien ya que utilizamos scss y haya variables no incluidas en el código

Ahora el input esta alineado a la izquierda.

he probado con el siguiente código:

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

Sin embargo no funciona, el boton de input sigue alineado a la izquierda.

Quiza sea poco el ejemplo que muestro

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

1 respuesta 1

1

Podrías usar margin: auto para centrar el botón añadiéndolo directamente en tu estilo de la etiqueta HTML:

<input type="submit" class="boton" value="Iniciar Sesión" style="margin: auto;">

O añadirlo a tu etiqueta CSS:

.boton: {
@include m.boton(v.$azul, v.$blanco);
border-radius: 1rem;
margin:auto; /* Añadir a tu css */
}
0

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.