メシのタネ

めしのたねになるIT情報配信サイト


vertical-alignが効かないとお嘆きのあなたへ

,

  1. CSS
  2. vertical-alignが効かないとお嘆きのあなたへ

newwebweb

画像横に文字を揃えたいって時に画像の中段って言葉が出てこなくて、真ん中って言ってしまったりした事を思い出します。ほらーえーとえーと!真ん中!真ん中に揃えたいの!真ん中ってどこやねんって。画像の中段も変かな。じゃあ、垂直方向の真ん中!真ん中ー!!!

インライン要素とブロック要素

HTMLにはブロック要素とインライン要素があります。体重が重たい要素がブロック要素で軽い要素がインライン要素です。要素っていうのはHTMLで言うタグの事です。ブロック要素は重たいので、横に並びませんが、インライン要素は軽いので浮きます。ヘリウムガスの風船みたいなもんです。ただ違うのは重なると必ず、既に居る風船の右隣に移動します。扱い方としてブロック要素は名前の通りブロック(レイアウト用)として扱われることが多いです。インライン要素は、ブロック要素内で使われる事が多いだろうとは思いますが、文中の一文に工夫を加えたい時に使われる事が多いです。

vertical-alignはインライン要素へ指定するプロパティ

訳の分からない説明が終わってvertical-alignです。これは、インライン要素のラインを決めるプロパティだと思ってます。CSSのプロパティって言葉は、CSSの持っている機能って意味で使われるんじゃないでしょうか。というわけで、vertical-alignを使えば、インライン要素内での文字が並ぶ高さを決める事ができます。

普通に使う

次の行へ改行されたもの(実際はしてないけど)だけ効いてるのが分かります。

別々のベースラインを設定する

これらをブロック要素で囲んでやれば上手く行くんだと思います。

てやー。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

PHP
魔王と行く! / Interface / Polymorphism / Ontology 深淵ガイドNew!!
Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書New!!
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみたNew!!
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体New!!
Laravel
LaravelのサービスコンテナとDI、「書いてるだけで動く」コードの正体
Laravel
Laravelのアーキテクチャ、実は誰もわかってない説