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>