Solucionado
Pessoal, se alguém puder, me diz se eu fiz a conta certa, porque eu n achei que está alinhado o modo que fiz.
imagem ta com height 2em; input somado top e bottom ta com padding de .50em;
somei e dividi por 2, o resultado foi 1.25em.
ainda tem o border de 1px cima e baixo.
resultado foi esse, line-height: calc(1.25em + 1px);
Coloquei isso no line-height, porem eu ainda tenho a impressão que esta desalinhado.
Alguem pode me ajudar? fiz um JSFiddle pra facilitar a vida ^^.
Olá Nícolas,
Tranquilo?
Então, se você for continuar fazendo o tamanho do input variar com o padding sinto lhe dizer mas será uma batalha perdida, pois qualquer mudança do tamanho da fonte, estilo e etc, tudo isso irá mudar, o ideal seria você fixar o tamanho da largura e altura do input.
Sobre a conta, você apenas esqueceu de compensar o tamanho da borda, se você coloca uma borda de 1px no input você teria que colocar line-height: calc(1.25em + 2px), pois é 1px no top e 1px no bottom.
Fiz um UPDATE no seu Fiddle com uma correção pra deixar alinhado.
Espero ter ajudado!
Abraços.
Não consigo ver o UPDATE que você fez, poderia postar o link dele?
com relação a tamanho de fonte, fiz alteração de em, pra pixels, e continua quebrando o layout se a font ficar muito grande.
Segue o link: Fiddle
Como eu disse, usar o padding é arriscado, até por que se você testar em um outro navegador já terá algumas diferenças.
Tudo bem, Obrigado pelas dicas!