Alinear la línea de base de texto con un botón en CSS

Puedes usar: line-height!

.box {
  color: #fff;
  background: #444;
  height:      40px;  
  line-height: 40px; /* Same as height  */
}

<p class="box">some text <input type="button" value="Button" /></p>

Establecido para el botón padre,
donde, como puedes ver, line-height coincide con el elemento height
y alineará ambos textos en el centro del elemento (p). De lo contrario, el botón, siendo un elemento inline por defecto, está sujeto a manipulaciones usando la propiedad CSS vertical-align: que básicamente alinea todos los elementos* inline* * verticalmente dentro de un elemento de nivel block usando esta tipografía términos:

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
vertical-align: 10em;  
vertical-align: 4px;
vertical-align: 20%;

*_{https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align}

Exactamente, incluso puede ajustar manualmente la alineación utilizando PX / -PX y %

He encontrado algunos problemas al usar line-height en navegadores Android (), por lo que a veces la solución correcta era jugar con el padre padding * y vertical-align en lugar de las alineaciones internas de los niños (con line-height).

*_{(nota: el relleno para elementos de bloque es más consistente que (arriba, abajo) usado en elementos internos en línea.)}