Skip to main content
se añadieron 145 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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. Estoy probando con lo que os dejo a continuación,cómo podría resolverlo?. HTML:

<!--InputSection-->
    <section>
        <div class="box">
            <form >
                <input type="text"name="" placeholder="Username">
                <input type="submit" name="" value="Ver">
            </form>

        </div>
    </section>

/*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 ¿añado un align-items quizá? ¿Cómo podría resolverlo?

/*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;
}

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,cómo podría resolverlo? HTML:

<!--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á??

/*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;
}

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?

Origen Enlace
L.Bar5522
  • 335
  • 2
  • 18

Centrar input en web con css

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,cómo podría resolverlo? HTML:

<!--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á??

/*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;
}