株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

【CSS】input要素の位置がずれるとき

2016.2.10(Wed) 20:54 | CSS | oshima

こんばんは。
随分さぼってしまいました。

今日はCSSのお話しです。
先日input要素を横並びにした単純なフォームを作っていました。
ですがIEで見ると問題ないのに、ChromeとFireFoxでは位置がずれてしまいます。
どうやら1px分余白があるようでどうにも綺麗に並んでくれませんでした。
そのときの解決法です。

環境

IE9+
Chrome
FireFox

方法

対象のinput要素に「vertical-align:middle;」を指定するだけ。
簡単でした。

input {
    vertical-align : middle;
}