on:2020年8月24日sponsors検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト(アイコンも)を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。CodyHouse下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。あなたは仲間です、多くの人が経験していると思います。flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。ゴールを明確にしておきましょう。button要素とinput要素のコンテンツは完璧に揃えます。button要素とinput要素の高さは同じです。borderで決定します。40px;など)で定義することが考えられます。button要素とinput要素はあらゆる状況下でそのコンテンツに適応させるため、(固定の高さより)paddingを使用する方が安全です。これらのプロパティに定義された値の組み合わせによって決まります。button要素とinput要素の高さに影響するプロパティbutton要素とinput要素の基本的なスタイルを定義してみましょう。0.5em;}</style>このCSSのポイントを解説します。button要素のdisplay値をinline-flexに定義して、justify-contentとalign-itemsプロパティでコンテンツを中央に配置できるようにしています。ボタンの中にアイコンを配置する場合に便利です。border-widthを定義します。ボタンに目に見えるボーダーを与えるつもりはありませんが、button要素とinput要素の高さが同じになるように透明のボーダーを適用します。line-heightの値は、1よりも少し大きくする必要があります。1にすると、input要素はその値を受け入れず、button要素よりも高くなります。この例では、1.2を定義しています(必要に応じて、normalの使用も可)。この基本的なスタイルにより、button要素とinput要素の高さが同じになり、コンテンツが垂直方向に揃います。font-sizeを変更したり、font-familyを変更しても、整列に影響はありません。paddingとborderを使用して高さを決めているからです。単位にemを使用することで、スケールアップ・ダウンすることもできます。button要素とinput要素を美しくするあとは、button要素とinput要素のカスタムテーマを作成するだけです。CodePen.高さのバリエーションを用意するbutton要素とinput要素に固定の高さを定義する必要がある場合、デフォルトのline-heightでは整列が崩れてしまうことがあります。その場合は、垂直方向のpaddingを削除して、line-heightをheightと同じ値にします。ボタンと入力フォームに適用されたときにわずかに異なる振る舞いをする高さのユーティリティクラスを用意しておくことで、回避できます。50px;}これらのクラスを使用すると、さまざまな高さを使用できます。