JoeHTMLとCSSで、テキストや画像を縦方向(上下方向)に中央寄せ(センタリング)したい事があります。この課題は簡単そうに見えて、意外と厄介です。実際のところ、実現方法にはいくつかの選択肢がありますが、いずれも、HTML、CSSの初学者にとってはちょっとだけトリッキーです。関する基礎知識CSSでの中央寄せ方法を考える上で、まず最初に知っておかなければいけないのは、HTML要素における「インライン」と「ブロック」の考え方です。HTMLでは、テキスト(文字列)のような、文書に流れ込むように配置される要素は「インラインレベル」の要素と呼ばれます。これらは、要素の横幅を満たすように配置される「ブロックレベル」の要素と区別されます。デフォルトでインラインレベルの要素なのは、例えば、<a>タグや<span>タグです。利用するタグだと思います。inline」と指定して、変更することもできます。インラインとブロックの概念の詳細は、この記事末尾の補足セクションに解説を加えましたので、ぜひご覧ください。center」を適応します。「text-align」自体はブロックレベルの要素に対して、その要素が内包するインライン要素のテキスト寄せ方に関する振る舞いを定めるためのプロパティです。(※要素に内包されたテキストはインラインレベルとして振る舞います。ブロック要素の中にタグに囲まれていないテキストだけがあれば、テキストはインラインの振る舞いとなります。ブロックレベルの要素に対して適応するんだね。テキストの縦(上下)方向の中央寄せ縦(上下)方向の中央揃えは、1行のテキストか、2行のテキストかで、複雑さが変わります。1行のテキストの場合CSSで、line-heightプロパティは、1行あたりの高さを大きく定めれば、内包されたテキストは縦方向のおおよそ中央付近に配置されます。これは基本的な仕様ですので、あまり細かい説明は不要かもしれませんね。1行のテキストで縦の中央寄せ。background-color:#fff2fa;}</style>CSSの「line-height」プロパティは、その値にpxやpt値、もしくは、%や少数などの割合を指定できます。割合を指定すれば、font-sizeプロパティで指定されるフォントサイズに対する割合として解釈されます。上記のように、line-heightの値を極端に大きくすることで、自動的に内部のテキストが縦方向の中央寄せに配置されるというわけです。1.2〜2程度の値が読みやすい範囲です。ブラウザ(Chrome)のデフォルトは「normal」というキーワードで指定され、その具体的な値はおおよそ1.2程度です。太〜い1行、ということだね。複数行のテキストの場合2行以上のテキストの縦方向の中央寄せは少しトリッキーで、直感的には理解し難いかもしれません。実際の所、複数行のテキストのセンタリングにはいくつかの選択肢があります。middle」というスタイル指定を利用しますが、アプローチが少し違います。「テーブルセル」作戦これも一般的な方法で、CSSの「display:table-cell」を使います。table-cell」の子要素には「vertical-align:middle」が有効ですので、これによって上下に中央寄せします。「display:table-cell」は、tableの中のみで有効ですから、親要素にもまた「display:table」の指定が必要です。見た目は全然テーブル(表)ではないのですが、CSSには「table」と書かれているという、若干の気持ち悪さが残りらなくも無いですが、スタイル(=表現)の問題だけですので、まあ気にしなくてもよいでしょう。class="target">テーブルセルは<br>vertical-align可能。block」のときと異なりますので、width値を宜しく設定するようにして下さい。要素は表示のルールが変わることをうまく利用しているんだね。インラインブロック」化するこちらはややトリッキーですが、覚えるとおすすめの方法です。displayプロパティの「inline-block」を利用します。CSSの、inline-blockプロパティは、2017年現在では、ほとんどのブラウザで完璧にサポートされていますので、恐れる必要はありません。class="target">2行以上の<br>テキストでも<br>自動的に中央付近に。line-height:normal;}</style>対象対象のインライン要素(.target)の親要素(.container)で「line-height:300px」と高さを固定することで、内包される対象は自動的にその行内で、高さ方向の中央付近に配置されます。line-heightの値を小さく設定している点です。上記は「normal」キーワード(ブラウザのデフォルト値)に指定していますが、お好みの数値で構いません。これにより、対象要素は自然な行の高さの複数行を実現しつつ、その要素自体は親の高さに対して、中央付近に配置できるのです。middleにしているのに、なんで上下にセンタリングされないんだろ〜?」と時間を浪費してしまいがちです。vertical-alignは、「親要素の行に対する自身の縦方向の配置)」を決めるものです。そんな決まりがあったんだね・・・。middle」は「その要素の縦方向の中央と、ベースラインの高さに、x-heightの半分の高さを加えた位置と合わせる」と定義されています。参考まで、フォントには「x-height」と呼ばれる高さがあります。これは「英字フォントの小文字の高さ」であり、フォントデータ内で定義されます。middle」の定義である「baselineにx-heightの高さの半分を加えた位置(下図赤線)」は、その要素自体の縦方向の中央線と必ずしも一致しません。(フォントデータ次第です。)これは「アルファベット文字の(見た目的な)中央」と要素を揃えて見せるための計算方法ですが、要素に指定されたフォントサイズが大きければ大きいほど「要素の中央線からのズレ」は大きく見えます。状況によっては、このずれが問題になることもあるでしょう。Networkのページで、CSSプロパティ「vertical-align」の詳細な定義に言及しています。CSSによるブロック要素の上下左右の中央寄せここからは、ブロック要素の中央寄せ方法です。インラインと幾分勝手が違いますので、ご注意下さいね。5種類のスタイルの指定方法に分けて解説します。自動マージン」を使った上下左右の中央寄せブロックレベルの要素の中央寄せで、最も直感的なのは「position:absolute」を使った方法です。このプロパティと「margin:auto」を組み合わせれば、自動的に上下、もしくは左右がそれぞれのバランスを取るようにマージンが自動計算されます。下記の例をご覧ください。インライン要素も「display:block」でブロック化すれば同じ方法が適応できます。class="target">このブロックは中央に揃えました。initial以外の値となるようにして下さい。対象要素の高さを明示的に固定してやる必要があります。auto(初期値)では、親要素の上下に張り付くように対象の高さが自動計算されてしまうでしょう。特性をうまく利用した方法だね。中央寄せしたブロックの高さは自動化できるの?対象がブロックレベル要素のとき、その高さを自動的に最小の値に最適化する事は、絶対配置方式ではできません。そのような場合は、下記のいずれかの方法をつかう必要があります。対象をインラインブロックにする対応す(前述のインライン方式です)flexboxを使う(このセクションで後述します)また、対象要素の「アクペクト比(縦横比)」を指定したり、画像のアスペクト比を固定したい時は、このような方法もあります。負のマージン」での上下左右の中央寄せ対象要素が絶対配置される際の基準点を、要素のマージン値を負の値にすることで、ずらす手法です。マージン値を要素の高さ、要素の幅のちょうど半分の値にすると、上下左右それぞれ中央に配置されます。class="target">このブロックは中央に揃えました。関数」での上下左右の中央寄せ負のマージンの手法と似ていますが、こちらは、CSS「calc関数」を使った方法です。縦、横方向にそれぞれ半分をマイナスしてずらします。class="target">このブロックは中央に揃えました。関数を用いれば、いままで難しかったレイアウトの多くが容易に実現できるようになります。対象要素の縦幅、横幅大きさを固定してやる必要があります。関数は、現在ではほとんどのモダンブラウザでサポートされています。Explorerだと9以降でないとサポートがないようですが、果たして、IE8のようなユーザを対象としたウェブサイトを作ろうとしているのかどうか・・・というところは考えてみてもよいでしょう。関数は便利だけど、使いすぎるとCSSが複雑になって、メンテナンスしにくくなりそうだね。transform」での上下左右の中央寄せ「transform:translate()」によって、対象要素の表示をずらす事ができます。その要素の縦・横それぞれ50%ずらす、という指定が可能ですので、この特性をうまく利用します。transformで入力する%値は、要素自身の幅と高さを基準に相対的に計算されますので、「自分の50%」といった表現が容易に可能です。class="target">このブロックは中央に揃えました。0.6);}</style>CSSは非常にすっきり記述できます。プロパティは、IE10以降のサポートとなります。同様にIEのサポートに関してはそもそもサポートするかどうかが判断基準ですが・・・、これよりは前述のcalc関数の方が、サポート範囲が広いでしょうか。」を利用した上下左右の中央寄せこちらはグリッドレイアウトで重宝するFlexboxを利用した方法です。本来は、複数の要素をグリッド状に並べるためのものですが、1つだけの要素にも適応できます。対象要素の高さが、コンテンツにフィットするように自動計算できるのは便利な点です。class="target">このブロックは中央に揃えました。0.6);}</style>FlexboxもIEでは、10以降のサポートとなります。FlexboxFlexboxのプロパティに関しては、こちらで網羅的に解説していますので、興味のある方はぜひご覧ください:CSS:Flexboxとは?グリッドレイアウトの解説とCSSサンプル。IEのサポートがなかったので利用しにくかったけど、近年は利用が増えてきたみたいだね。CSSによる画像要素の上下左右の中央寄せ基本的には画像もimg要素であれば、displayプロパティでインラインか、ブロックかどちらかに設定し、上記で解説した2つの方法が適応できます。画像の表示に関しては、要素の背景として設定する「background-image」を使った設定方法もありますので、改めてこのセクションにくくりだして網羅しておきます。インラインのIMG要素の上下左右の中央寄せimgタグは、デフォルトではdisplay:inlineのインライン要素です。上述のline-height作戦でも、ある程度中央寄せが可能です。(正確には、imgタグは「replaced-element」と呼ばれる種類の要素で、配置と描画はブラウザ実装依存となります。組み合わせでは、ベースラインの高さの分だけずれるため、厳密に正確な「中央寄せ」とはなりません。このような画像は明確な四角形ですので、微妙なズレが問題になることもあるでしょう。正確な中央寄せを実現するために、ひと手間増えますが、imgタグをblock化し、あとは、ブロック要素を中央寄せするための一般的な方法を適応すればOKです。ブロック要素化したIMGの中央寄せは、下記に続きます。ブロック化したIMG要素の上下左右の中央寄せIMGタグを使って画像をセンタリングする場合は、ブロック化する方法のほうが幾分おすすめです。IMG要素の縦・横のいずれか片方を「auto」のままにしておくと、画像要素のアクペクト比(縦横比)が崩れることはありません。margin:auto;}</style>画像要素は見た目が四角いから、ブロック化したほうが直感的に扱いやすいケースも多い気がするね。background-imageプロパティを利用するのが、レイアウトにおいては便利です。none」を追記して、背景画像の繰り返しを抑制している点に注意して下さい。設定値、「cover」「contain」です。これらのキーワドのいずれかで、画像の自動サイズ調整を行うことができます。cover要素に空白ができないように拡大します。はみ出した部分を切り落とします。contain縦、横のいずれかで、要素の長さを満たすように拡大します。center」を組み合わせれば、画像の中央配置で必要となる配置方法のほとんどは実現できるでしょう。タグのaltのような値を設定できないため、SEO観点で不利だと言われています。そのページが十分にテキストを配置できる限りは、画像の近くに十分なテキストを配置することで、十分カバーできこともあるはずです。値は、そのページの価値の全てを左右するような魔法のキーワードではないからです。して中央寄せしたほうが、シンプルに記述できるね。【補足】HTMLとCSSの基礎知識:インラインとブロックインラインレベル、ブロックレベルとは?CSSでの中央寄せ配置を考える際に、その要素の「display」プロパティがどのように指定されているのか、意識する必要があります。displayプロパティが取りうる値は複数ありますが、その値によって要素は下記の2つに大きく分類されます。インライン(inline)レベルの要素ブロック(block)レベルの要素これらは、その要素や、その要素が内包するテキストがどのように描画されるかを左右します。CSS2の定義を置き換えるように再定義されています。詳細な概念の理解を追求すれば逆に混乱しやすいですので、開発者は「どちらの値であれば、どのように描画されるか」にフォーカスして理解したほうが良さそうです。もとづいて解説します。なんらかの値が割り振られています。img要素、a要素、span要素は「inline」がデフォルトです。div要素、p要素は「block」がデフォルト値です。table」と指定された要素も、その描画において「ブロックレベルの要素」として扱われます。デフォルトでインライン要素であっても、CSSの「display」プロパティを使って、「display:block」を指定すればブロックレベルに、「display:inline」を指定すれば、インラインレベルとして扱う事ができます。値を設定する事もあるでしょう。こちら、インラインとブロックの描画の違いをイメージで表したものです。インラインはテキストの文字が(左寄せであれば)左側に、行内に次々に流れ込むように表示されます。一方で、ブロックは見た目的に「あたかもブロックように」描画されます。ブロックレベルの要素に内包された、タグで囲まれていないテキストはすべて、インライン要素として振る舞います。center」が意味を持たないことが分かります。「text-align」は、「そのブロック要素が内包するインライン要素の上下方向の配置方法」指定ですので、インライン要素自体にこの設定値は無効です。別の例では、「width」プロパティは、ブロックレベル要素には有効ですが、インラインには意味を持ちません。このように、要素がインラインとブロックかを理解する事は、CSSでの中央寄せを正しく理解するためは、必要不可欠といえるでしょう。HTMLとCSSでの、中央寄せの参考情報CSSプロパティ「vertical-align」の詳細です。インラインの中央寄せにおいては、重要なプロパティです。vertical-alignお疲れ様。中央寄せはいろいろ方法があるので、状況にあわせて使いこなせるようになりたいね。リモートブランチの最新に合わせようとしたら・・、あれ?コンフリクト・・?なにこれ、うまくいかない12021-05-11Git正規表現:数字の表現。桁数や範囲など正規表現での、数字に桁数に関する方法に関してです。これを応用して、数字の大きさの範囲を指定します。正規表現にいて、複数のパターンのうち「いずれか、または」を意味する「OR」を表現する方法についてです。正規表現の基本、行頭(行の先頭)と行末(行の末尾)を表す表現です。取り消し方法や、やり直し操作に関する方法をまとめました。どんなコミッ12018-07-15GitCSSに関連する記事チェックボックス(ラジオボタン)を縦に中央揃えするHTMLとCSSHTMLとCSSで、チェックボックスやラジオボタンなどのINPUT要素を実装すると、いつもずれてしまいます。placeholderの色を変更する方法についてです。2020-04-19CSSCSSで「+(プラス)」というセレクタの意味は何?CSSでたまに見かける「+(プラス)」というセレクタ。2017-05-07CSSCSSで、マウスカーソルを指マークに変更する方法CSSで、マウスカーソルを指マークに変更する方法です。fixedを使った絶対配置、徹底まとめ。HTMLでは、CSSプロパティ「position」をabsoluteに指定することで、絶対配置が可能な事はよく知られてい12017-08-22CSSCSSで、テキストや背景に、透明色を指定する方法CSSで、テキストや背景に、透明色を指定する方法です。fixedを使った絶対配置、徹底まとめ。強制し、リモートでローカルを上書きする方法2021-05-11正規表現:数字の表現。コマンドの履歴を削除する方法2021-12-19「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。