【CSS】要素の縦中央揃えをいい加減攻略したい。5【CSS】要素の縦中央揃えをいい加減攻略したい。初学者向けみたいな内容ですが、よろしくお願いします。今年は一年かけて、Angularを用いたWebサイトの開発に邁進していました。Angular、モジュールを分割することで中々気持ちよく開発できるフレームワークだったのですが、モジュール分割をしてる都合上どうしてもCSSを弄らなければならないシーンが多く、弱点:CSSな自分は結構躓いてしまうシーンが多かったです。中でも毎回悩ませてくれたのが、タイトルにもなっている縦中央揃えです。縦中央揃えとは名前の通り、要素を縦中央に沿って並べることです。Angularなどのフレームワークではモジュールが独立しているため、要素のサイズを事前に決定することができない事が多いため、意外と多用することになります。理想としてはこんな感じ。この縦中央揃え、世に書かれているおすすめコードを試してみても効いたり効かなかったりして、最終的に「色々試してたら書き散らかしたコードが上手い具合に効いて縦中央に揃ったわ!ヨシ!」となりがちだったので、今回はこの場を借りて巷でよく聞く縦中央揃えの手法を実際にいじり倒してみようかと思います。縦中央揃えに行く前に、まずinline要素を並べたときにどんな相互作用が発生するか理解しておく必要があります。なんも考えずにベースコードを実行して、何が表示されるか見てみましょう。...一番上にきちっと揃うのを期待してましたがガッタガタですね。個人的にもうこの時点でなんでやねん!とベタな突っ込みをしてしまいそうになるのですが、一旦落ち着いて1本補助線を引いてみましょう。フォントサイズの違う3つの文字がきっちりラインで揃ってるのがわかると思います。このラインがbaselineです。vertical-alignによって位置設定がされていないinline要素は、「alphabetic」というアルファベットベースのbaselineによって、位置が規定されますもう少しbaselineがどういう動きをするか、色々試してみましょう。画像・二行以上の文章・要素の中身なしだと...?どうやら、画像の下・一番下の行の下・要素自体の一番下がbaselineとして設定されるようです。直感的といえば直感的な揃い方ですかね...?inline要素はこのように同じラインにある子要素の影響を受ける可能性のある要素ということを覚えておく必要があります。この知識を武器に縦中央揃えを攻略していきましょう。今回は以下の5つの縦中央揃えの手法を試してみたいと思います。middle;名前が縦中央に揃えられるぜ感を出してるせいで、最初に適当に試して玉砕しがちな手法ですね。vertical-alignは子要素同士の位置関係性を定義するプロパティです。したがって、子要素に対して付与するプロパティとなります。試しに子要素につけてみましょう。お、未適用の状態に比べるとbaselineの制約が消えて縦中央に揃いましたね。いやーめでたsコレジャナイ。やりたいのは親要素に対する中央揃えなので、子要素の縦中央だけ合わせても仕方ないですね。他の中央揃えの手法と組み合わせて使うのが基本のようです。(例:親要素の高さ=子要素の高さ)、vertical-alignのみでも他の要素の縦中央揃えが可能です。試しにChild3の縦中心を親に合わせてみたのが以下です。Child3のボックスに引きずられて、Child1,2どちらも縦中央に揃っています。このやり方は一つでも高さを指定できるinline-blockが入っていれば有効ですので、意外とこれだけでなんとかなるシーンは多そうです。(親要素の高さ);テキストがline-heightに対して縦中央に配置されることを利用して、無理やり縦中央揃えに利用してしまおうという、どこなくパワーを感じる手法ですね。何も考えずに適用してみましょう。」のどちらでもOKです。inline-blockだと内部テキストにデザインが追従しないので文字だけが吹っ飛んでしまうようですね...。Child3の文字が中央からずれているようです。middle;を追加してみましょう。縦中央に並びましたね!元のinline-blockを利用する想定とは違いますが、inlineの子要素のみならこれでも行けそうです。line-heightは値として"100%"が使用できないので親要素の高さが固定であることが前提となるのに注意する必要があります。0;自動的に揃えたい時にautoって単語は非常に心地よく耳に響きますよね。flexboxのmarginの上下にautoを設定するとうまい具合に(よくわかってないの意)中央揃えになってくれる機能を利用したものです。説明からして求めているものですが、落ち着いて適用してみましょう。きれいな中央揃えになりました!baselineの影響も受けていないようです。なにかすんなり行き過ぎて悔しいので、子要素がinline要素の場合も試してみましょうか。全ての要素をinlineにして確認してみます。悔しいことにこちらもきれいに縦中央揃えになるようです。0;が安定しているようです。transform失敗が続きパラメータによる自動整列が信用できなくなってくる頃に使いたくなってくる、ちゃんと要素をずらして縦中央揃えを実現する手法です。以下の三つの要素を子要素に適用することで縦中央揃えを実現します。tranlateY(-50%);)といった感じです50%の意味が異なるのでちょっと混乱しますが、動作を書きだしてみるとシンプルで間違いのない縦中央揃え方法ですね。子要素に適用してみましょう。Child3が微妙に中央からずれてしまっていますね...。baselineに沿っているような感じでもないですし...。これもbaselineの影響のようです。綺麗に中央に寄るには全子要素の一番上が親要素の中央線と同じ場所になければなりません。top;を追加して改めてやりなおしてみます。よし!きれいに縦中央揃えになりました!。inline要素の場合はどうでしょうか?全ての要素をinlineにしてみます。translateY(-50%);が機能していないようです。inline要素は高さを持っていませんので、その影響だと思われます。今回の様にinline-blockで構成されている子要素ならば問題ないですが、inline要素の場合は別の縦中央揃えを利用するほうが良さそうです。table-cell;です。基本的な使い方は、親に以下の要素を追加する形です。middle;}では試しにやってみましょう。あ、なんかもう見慣れた感じのズレですね。middle;を追加しましょう。綺麗に縦中央揃えになりました!このまま子要素をinlineにしてみましょう。inlineにしても問題なく縦中央揃えになるようです!かなりお手軽に中央揃えが出来るtable-cellですが、ちょっと特殊な要素でもありますので使う際は意識しておく必要がありそうです。以下の記事がtable-cellの制約について詳しく解説しています。middle通常は親要素に対して縦中央揃えはできない。親要素と縦の中心が一致している子要素があれば可能。(親要素の高さ)縦中央揃えが適用されるのはinline要素のみ。middleを適用する必要あり。0;inline要素、inline-box要素どちらでも正しく縦中央揃えを実行することができる親要素をflexにする必要があるため、適用できるかは要検討。inline要素はうまく縦中央揃えにすることができない。table-cell;inline要素、inline-box要素どちらでも正しく縦中央揃えを実行することができる親要素をtable-cellにする必要があるため、適用できるかは要検討。縦中央が親と一致するinline-blockが混在している場合は、縦中央揃えが可能。いかないようです...。これなら効く、効かないというのが割とはっきりしたので、今後縦中央揃えにチャレンジしなければならなくなっても上手く立ち回れそうです。あと、とりあえずCSSで記事書くのはめっちゃしんどい事はわかりました。nonami@prononamiFollow株式会社ピー・アール・オーソフトウェアの受託開発・SES・メディア事業・ブロックチェーンの開発提案など。upLoginユーザーは見つかりませんでした。