【CSS】縦幅サイズがわからない要素の縦中央にテキストを配置する方法

2015/04/24 2019/12/16

heightがわからないボックスの中にテキストを縦方向中央に配置する方法を備忘録としてポストします。

縦方向中央に配置

親ボックスに display: table; を指定

色々と方法があるとは思いますが、一番シンプルで面倒くさくない方法を書いてみます。

<div class="sample_box">
    <p class="text">サンプルテキスト<br />サンプルテキスト</p>
</div>

<p class="text">サンプルテキスト<br />サンプルテキスト</p>

</div>

.sample_box {
    margin: 1em 0;
    border: 1px solid #ccc;
    height: 300px;  /* ←★仮に設定 */
}

div.sample_box {
    display: table;
}

p.text {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0.5em;
}

.sample_box {

margin: 1em 0;

border: 1px solid #ccc;

height: 300px; /* ←★仮に設定 */

}

div.sample_box {

display: table;

}

p.text {

display: table-cell;

vertical-align: middle;

padding: 0 0.5em;

}

結果

デモ

解説

親要素に display: table; を指定し、テーブル同様に扱ってしまおうという考えです。

中央配置したいテキスト要素に display: table-cell; を指定。
あとは配置したい middle やら top などの設定をするだけです。

少々乱暴な気もしますが、そこは割りきってしまいましょう。

-HTML,CSS
-センタリング, テキスト, ブロック要素, 中央揃え, 縦方向

: 【CSS】CSSのみでマウスオーバーしたテーブル行の背景色を変更する方法

HTMLで縦に長いテーブルを組んだ時など、カーソルがどこにあるのかよく分からなくなる事がたまにあるので、マウスカーソルがある行の背景色をCSSの設定のみで変更する方法を紹介します。

: Bootstrapで画像をレスポンシブ対応した際にセンタリングさせる方法。

Bootstrap使用時、「img-responsive」プロパティで画像をレスポンシブ対応させた場合に左寄せとなりますが、それを中央寄せ（センタリング）させる方法を忘備録としてポストします。

: 【CSS】ラジオボタンの背景色を選択肢によって変更する方法

今までも何度か登場していますが、ラジオボタンの背景色。今回は、選択肢によって色を変えれば見やすくなると思ったのでそれに対応したものの備忘録です。

: 【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる

ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3では数行のコードで実現可能。忘備録としてポストしておきます。

: 【CSS】「white-space:nowrap」で、タグクラウドを改行させずに表示させる

以前から、タグクラウドの表示で一文が改行させるのが非常に気になっていましたが、何の事はない、対象のaタグに対して white-space:nowrap を指定するだけですっきりさせることが出来ましたので、備忘録としてポストします。