【ワテの備忘録】divの中のlableを上下左右の中央配置にする【解決】

この記事は約7分で読めます。
スポンサーリンク

ワテの場合、CSSの設定がなかなか覚えられない。

当記事では、divの中に配置した文字列をdivの左右中央にする手法、上下左右中央にする手法を紹介したい。

では、本題に入ろう。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

divの中のlabelを左右中央に配置したい

今日、こういう状況に遭遇した。

divの中のlabelを中央配置にしたい(下図)。

それで、以下のようなHTMLとCSSを書いたのだが、何故か中央に来ないでデフォルトの左配置になる。

<div id="divContainer1ID">
     <label>これはラベル</label>
</div>
 
<style>
    #divContainer1ID {
        width: 300px;
        height: 100px;
        border: 10px dotted blue;
    }
 
    #divContainer1ID > label {
        text-align: center;
    }
</style>

良く考えたらこれでは出来ない。

text-align: center は label に与えるのではなくて、それを囲んでいる div に設定すれば良いのだ。

    #divContainer1ID {
        width: 300px;
        height: 100px;
        border: 10px dotted blue;
        text-align: center;            /* これを追加 */
    }

これで無事に冒頭の例のようにラベルを div の中央に配置出来た。あるいは right にすれば右寄せも可能だ。

 

さて、これで一件落着なのだが、気になる点がある。

もし label が div の中ではなくて body とか table の td の中とかにある場合には、その要素に対して text-align:center を指定すれば良いのだが、何だか面倒。

label自身の属性で左右中央配置は出来かな?

親となる要素に text-align を指定するのではなくて、ラベル自身の属性に何かセットする事によって中央配置が出来ないものかなあと思い少し調べたら出来た。

それがこれだ。

div は width/height の大きさとボーダーしか設定していない。

<div id="divContainer1ID">
     <label>これはラベル</label>
</div>
 
<style>
    #divContainer1ID {
        width: 300px;
        height: 100px;
        border: 3px solid red;
    }
 
    #divContainer1ID > label {
        text-align: center;  /* これだけではダメで、  */
        display: block;      /* この設定が重要        */
    } 
</style>

それにも関わらず、良い感じで中央配置が出来た。

実は、冒頭のラベル左右中央配置の例はこの方式で描いている。

labelのdisplay:blockの意味

HTMLの要素には

  • Inline Element
  • Block Element (=Block-level Elements)

がある。

Block-level Elements

ブロックレベル要素は、直前の要素の右に並ぶのではなくて、次行に改行した位置に配置される。また、その幅は左右に最大幅まで広げられる。つまりwidth:100% の状態だ。

block-level elementの例

<div>
<h1> - <h6>
<p>
<form>

Inline Elements

inline elementの場合には、改行せずに直前の要素の右隣に配置される。

また、その幅はその要素に必要な幅だけしか確保されない。例えばラベルの場合ならその中の文字数分の幅しかとらない。

inline elementの例

<span>
<a>
<img>

インライン要素のlabelに対しては display:block 指定をするとブロック要素的な属性となり、最大幅を持つ。

その状態で text-align:center を指定すると期待通りに左右の中央に配置出来ると言う事だ。

今の場合は、labelの親要素がdivでありそのwidthが300pxなのでlabelも300pxの幅を持つ。

確認したい場合には、labelのbackground-colorなどを設定して色を変えると分かり易い。

 

では、label を上下左右中央配置にしたい場合にはどうすれば良いか。

その手法を以下で紹介しよう。

label を上下左右中央配置にしたい場合には?

この場合には、上下方向も中央と言う事なので、ラベルを保持する何らかのコンテナ要素が必要になる。

ここでは div の場合だ。

実行結果はこんな感じ。

期待通り上下左右の中央配置に出来た。

その方法は以下の通り。

<div id="divContainer2ID">
     <label>これはラベル</label>
 </div>
 
<style>
    #divContainer2ID {
        display: table-cell;
        vertical-align: middle;
        width: 300px;
        height: 100px;
        border: 3px solid #5e3181;
    }
 
    #divContainer2ID > label {
        display: block;
        text-align: center;
    }
</style>

解説すると、左右方向は上述した label に display:blockの方式だ。

これは div 側に text-align:center の方法でも良いと思う。

 

一方、上下方向の中央配置に関しては、div要素に下の二つの設定を行えば良い。

        display: table-cell;
        vertical-align: middle;

display:table-cell; を使うと簡単に上下方向の位置決めが出来るのだ。

ウェブサイトを作っていて良くあるのはこの例のように上下中央に配置したい場合だ。その時には、この例のように vertical-align: middle; を組み合わせると簡単に上下中央配置が実現出来る。

もしdivにdisplay:table-cell; を指定しない場合には、divはデフォルトの display:block; のままであるが、その状態で vertical-align: middle; のみを設定しても上下中央にならない事が多い。

その辺りの理由はワテは良く知らないが、経験的に言うと、このようにdivにdisplay:table-cell; と vertical-align: middle; の組み合わせを指定すると上下中央配置が期待通り動く。

まとめ

CSSの設定は良く忘れるので、その度にネット検索して思い出しているのだが、毎回調べるのも面倒なのでブログに備忘録として記録する事にした。

ワテの場合、WEBプログラミングの経験がまだ一年足らずなので勘違いも多い。

もし何かお気づきの点が有りましたら教えて下さい。

本を読む

ワテもこういうちゃんとした教科書を読むべきかな。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

CSSHTML
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント