CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは

[coliss]

button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック。

[renowan]

そして日本語だけ上10%くらい浮く

[iww]

昔は力業で強引にそろえたけど、今はもう少しだけスマートにできそう

[karupopo]

CSS ボタン配置

[Funyapu]

やり始めて、paddingつかったらiconが中にある時に死ぬと気付いた。そりゃそうだ。もしくはicon側にnegative marginいれるか。。。

[uunfo]

なぜ自動的にそうならないのか

[Falky]

日本語の話をしてくれるのかと思ってしまった

[xlc]

そもそも button 要素なんて使うか？

[style_blue]

そのうち必要になりそうなのでぶくま。

[ustam]

line-height に px 付けるのは気持ち悪いなぁ…