3

He creado un botón de input más otro a su lado de búsqueda pero no se me queda centrado en la sección donde lo he creado sino la parte de input encima de la parte de búsqueda. Estoy probando con lo que os dejo a continuación. HTML:

/*Inputsection*/

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  transform: translate(-50%, -50%);
  height: 600px;
}

input {
  position: relative;
  display: inline-block;
  font-size: 20px;
  box-sizing: border-box;
  transition: 0.5s;
}

input[type="text"] {
  background: chocolate;
  width: 340px;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 25px;
  border-radius: 25px 0 0 25px;
}

input[type="submit"] {
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 140px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #543;
  color: #fff;
}

input[type="submit"]:hover {
  background: #fff;
}
<!--InputSection-->
<section>
  <div class="box">
    <form>
      <input type="text" name="" placeholder="Username">
      <input type="submit" name="" value="Ver">
    </form>

  </div>
</section>

Aquí está en código CSS con el que estoy probando centrarlo, ¿añado un align-items quizá? ¿Cómo podría resolverlo?

4 respuestas 4

1

No se muy bien si he entendido muy bien tu problema, pero creo que te has equivocado al darle las medidas a .box.

    .box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  transform: translate(-50%, -50%);
  height: 100px;
}

Te he cambiado el tamaño del width y del height entre ellos y ya se han centrado. No se si es eso lo que necesitabas.

1
  • Muchas gracias ni me había dado cuenta,era ese el problema todo solucionado.:)
    – L.Bar5522
    Commented el 12 sept. 2021 a las 10:47
0

Lo que pude entender es que quieres que se centren los dos, algo así:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 300px;
}

input {
  position: relative;
  display: inline-block;
  width: 20px;
  font-size: 20px;
  transition: 0.5s;
}

input[type="text"] {
  background: chocolate;
  width: 70%;
  height: 50px;
  color: white;
  border: none;
  outline: none;
  padding: 0 25px;
  border-radius: 25px 0 0 25px;
}

input[type="submit"] {
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 25%;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #55f;
  color: #fff;
}

input[type="submit"]:hover {
  background: #00f;
}
<section>
  <div class="box">
    <form>
      <input type="text" name="" placeholder="Username">
      <input type="submit" name="" value="Ver">
    </form>

  </div>
</section>

0

Amigo usa flexbox te hace la vida mas sencilla, por cierto esta es una funcion vanilla de css, solo tienes que hacer esto en tu codigo: (por cierto ya lo probe y funciona)

section {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:top;
    width:100%;
}
/* centramos la caja en el centro */
.box {
  display: flex;
  flex-direction:row;
  align-items:top;
  justify-content:center;
  width: 100px;
  height: 600px;
}
/* esta parte de codigo es la mas importante ya que soluciona tu problema. */
.box form {
    display:flex;
    /* flex-direction sirve para que todos tus elementos se acomoden uno al lado del 
    otro */
    flex-direction:row;
    flex-wrap:nowrap;
}
/* cambie el inline-block por block en los inputs */
input {
  position: relative;
  display: block;
  font-size: 20px;
  box-sizing: border-box;
  transition: 0.5s;
}

input[type="text"] {
  background: chocolate;
  width: 340px;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 25px;
  border-radius: 25px 0 0 25px;
}

input[type="submit"] {
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 140px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #543;
  color: #fff;
}

input[type="submit"]:hover {
  background: #fff;
}
<section>
  <div class="box">
    <form>
      <input type="text" name="" placeholder="Username">
      <input type="submit" name="" value="Ver">
    </form>

  </div>
</section>

1
  • tienes razon igualmente funciona sin el flex-direction:row; Commented el 11 sept. 2021 a las 18:04
0
  1. El contenedor "box" tiene los valores "width" y "height" invertidos; los cambie a width: 600px y height: 100px;

  2. Debido a el cambio anterior se genero un espacio vació entre el input text y el input submit, porque?.. porque el width del input text es de 340px y el de el input submit es de 140px; para corregirlo o reduces el width del box o estableces el width asi:

    input[type="text"] { width: calc(100% - 140px); }

  3. Por ultimo ultimo a el Input type Submit le cambiamos la posición de relativa a absoluta.

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    transform: translate(-50%, -50%);
    width: 600px;
  }
  
  input {
    position: relative;
    display: inline-block;
    font-size: 20px;
    box-sizing: border-box;
    transition: 0.5s;
  }
  
input[type="text"] {
    background: chocolate;
    width: calc(100% - 140px);
    height: 50px;
    border: none;
    outline: none;
    padding: 0 25px;
    border-radius: 25px 0 0 25px;
  }
  
  input[type="submit"] {
    position: absolute;
    border-radius: 0 25px 25px 0;
    width: 140px;
    height: 50px;
    border: none;
    outline: none;
    cursor: pointer;
    background: #543;
    color: #fff;
  }
  
  input[type="submit"]:hover {
    background: #fff;
  }
<!doctype html>
<html lang="es" xml:lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <title>Plantilla de pagina</title>
    </head>
    <body>
        <header><section>
            <div class="box">
              <form>
                <input type="text" name="" placeholder="Username">
                <input type="submit" name="" value="Ver">
              </form>
          
            </div>
          </section>
        </header>
    </body>
</html>

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.