Quiero que los elementos en "contenedorInput" centre tanto el label como los inputs, ya les puse un width para que tenga su espacio, hay dos lineas dentro de ese contenedor, no entiendo porque no los quiere centrar.
Tampoco me quiere tomar el display:block, se supone que si yo pongo eso en el elemento div contenedor del label y inputs deberia ponerlos en bloque uno abajo del otro. Porqué no lo hace?
*{
margin: 0;
padding: 0;
}
.contenedor{
border-radius: 15px;
height: 280px;
width: 70%;
top: 100px;
padding: 25px;
background-color: crimson;
position: relative;
margin: auto;
}
.formularioClase{
margin: 25px;
padding: 15px;
border: 1px solid black;
}
.contenedorInput{
width: 100%;
background-color: aquamarine;
justify-content: center;
align-items: center;
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora</title>
<link rel="stylesheet" href="/Estilos/estilos.css"/>
</head>
<body>
<div class="contenedor">
<h1>Calculadora con JS</h1>
<form class="formularioClase" id="formCalculadoraID">
<div class="contenedorInput">
<label for="operandoA">Operando A</label>
<input type="number" placeholder="Ingresa el primer operando" class="inputClass" id="operandoA"/>
</div>
<div class="contenedorInput">
<label for="operandoB">Operando B</label>
<input type="number" placeholder="Ingresa el segundo operando" class="inputClass" id="operandoB"/>
</div>
</form>
<button class="botonResultado">Resultado</button>
</div>
</body>
</html>