ワレコ
WEBプログラミングは楽しい。
ワテの場合、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: 300px;
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のテクニックは年々新しい手法が登場するが、基本を押さえておく事は重要だ。
当記事では、
「divの中に配置した文字列をdivの左右中央にする手法、上下左右中央にする手法」
を紹介した。
これらの手法はWEBサイト製作時に良く必要になるので、基本をしっかりと覚えておくと良いだろう。
ワテはCSS設定を良く忘れるのでその度にネット検索して思い出しているのだが、毎回調べるのも面倒なのでブログに備忘録として記録する事にしたのだ。
ワテの場合、WEBプログラミングの経験がまだ一年足らずなので勘違いも多い。
もし何かお気づきの点が有りましたら教えて下さい。
本を読む
ワテもこういうちゃんとした教科書を読むべきかな。
（続く）
コメント