¿Cómo alinear verticalmente una selección con un botón JQuery?

Estoy seguro de que hay una solución fácil para esto, pero hasta ahora no la he encontrado y estoy a punto de tirar mi PC por la ventana.

Alguna idea de cómo puedo alinear verticalmente una selección con un botón jQuery donde la altura del botón es mayor que la altura de la selección. Como esto:

http://jsfiddle.net/hCCzQ/4/

Estoy tratando de alinearlos para que la selección esté en el medio del botón.

Muchas gracias!

preguntado el 21 de mayo de 12 a las 18:05

Incluya siempre su código fuente en la pregunta. -

3 Respuestas

Esto me funciona bien:

select, button {
    vertical-align: middle;
}
​

DEMO: http://jsfiddle.net/hCCzQ/6/

contestado el 21 de mayo de 12 a las 18:05

Excelente, muchas gracias! La solución simple es siempre la mejor. Literalmente he estado mirando esto durante horas con divs anidados saliendo de mis oídos. - GranBadMe

@MartinBurrow Sí, la solución más simple se alimenta del tiempo :) ¡De nada! - Visión

Esta es la única forma que pude encontrar para obtener un píxel perfecto:

button {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 32px;
    vertical-align: middle;
}

select {
    margin: 0;
    padding: 0;
    position: relative;
    top: 2px;
    vertical-align: middle;
}

Demostración: http://jsfiddle.net/hCCzQ/12/

Se ve bastante bien en Firefox e IE7.

contestado el 21 de mayo de 12 a las 18:05

Prueba esto:

http://jsfiddle.net/oscarj24/5FL4a/

 $(document).ready(function() {

  var b = $("#abutton");
  var s = $('select');   

  $(b, s).css('vertical-align', 'middle');
 });

Uso de clases con estilos CSS de la publicación de @jnylen:

JS:

$(document).ready(function() {
    var b = $("#abutton");
    var s = $('select');   

    b.addClass('btn');
    s.addClass('ddl');
});

CSS:

.btn {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 32px;
    vertical-align: middle;
}

.ddl {
    margin: 0;
    padding: 0;
    position: relative;
    top: 2px;
    vertical-align: middle;
}​

contestado el 21 de mayo de 12 a las 19:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.