3

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>

1 respuesta 1

3

Casi lo tienes, sucede que nunca estás haciendo flexible al div contenedorInput para que obedezcan las clases justify-content y align-items, es por eso que nunca están siendo centradas los elementos de adentro. Tendrías que hacer flexible al div contenedorInput con la propiedad display: flex, ya que con display: block no te va a funcionar, y pues con esto ya quedaría:

.contenedorInput {
  width: 100%;
  display: flex;
  background-color: aquamarine;
  justify-content: center;
  align-items: center;
}

Código:

*{
  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%;
  display: flex;
  background-color: aquamarine;
  justify-content: center;
  align-items: center;
}
<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>

1
  • 1
    Ay ay ay, te amo <3 jajjaja. Gracias!
    – Alan Stone
    el 2 mar. a las 22:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.