5

Nesecito alinear el alto de un boton y una caja de texto...Como puedo hacerlo ?

.round {
        background-color: transparent;
        width: auto;
        height: auto;
        margin: 0 auto 15px auto;
        padding: 5px;
        border: 1px solid silver;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        display: inline-block;
    }
<div class="pull-right">
    <form method="GET">
        <div style="display: inline-block ;">
            <input type="search" id="contractNumber" name="contractNumber" placeholder="Contract Number" class="round" />
            <input type="image" src="~/images/Lupa.jpg" width="30" height="30" />
        </div>
    </form>
</div>

Ahora se ve asi, deberia estar a la misma altura la caja de texto y la imagen de la lupa ...

introducir la descripción de la imagen aquí

2 respuestas 2

4

Elimina los atributos width="30" height="30" del segundo input

.round {
  background-color: transparent;
  width: auto;
  height: auto;
  margin: 0 auto 15px auto;
  padding: 5px;
  border: 1px solid silver;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: inline-block;
}
    
<div class="pull-right">
    <form method="GET">
        <div style="display: inline-block ;">
            <input type="search" id="contractNumber" name="contractNumber" placeholder="Contract Number" class="round" />
            <input type="image" src="~/images/Lupa.jpg"/>
        </div>
    </form>
</div>

2
  • La imagen se ve del tam año original si le quito el width y el heigh Commented el 3 abr. 2019 a las 15:56
  • Ok, es que no se puede visualizar tu imagen... Puedes jugar con esos atributos para que la imagen se adapte a tu necesidad o en ese caso te recomiendo usar Font Awesome el cual trae una gran cantidad de iconos vectoriales que puedes usar para tu proyectos, así no tienes que preocuparte por buscar otras imágenes.
    – DjCrazy
    Commented el 3 abr. 2019 a las 18:15
2

Una cosa que puedes hacer es darle un vertical-align: middle al input de tipo imagen para que se alinee verticalmente con el medio de la línea. De ese modo se alineará al centro vertical, no importará si la imagen tiene 30x30 o 20x20 o si es más grande y la estás escalando (que parece ser tu caso).

Aquí lo puedes ver funcionando (con una imagen de 300x300 escalada a 30x30):

.round {
  background-color: transparent;
  width: auto;
  height: auto;
  margin: 0 auto 15px auto;
  padding: 5px;
  border: 1px solid silver;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: inline-block;
}

input[type=image] {
  vertical-align: middle;
}
<div class="pull-right">
  <form method="GET">
    <div style="display: inline-block ;">
      <input type="search" id="contractNumber" name="contractNumber" placeholder="Contract Number" class="round" />
      <input type="image" src="https://placehold.it/300x300" width="30" height="30" />
    </div>
  </form>
</div>

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.