質問です。
WEBページを制作している途中に
良く理解できない事が起こりました。
html
1<div class="aaa">カテゴリ</div>
css
1.aaa{ 2 width:1000px; 3 height:50px; 4 background-color:#000000; 5 color:#FFFFFF; 6 vertical-align:middle; 7 text-align:center; 8 margin:auto; 9 } 10 11 12
といった感じのコードで簡単に説明しますと
ボックスをページ全体の中央に位置さして
その中の“カテゴリ”の文字もそのボックスの中央に
位置させたいという事なのですが
この、コードだけですと
確かにボックスの位置は、ページの中央には位置させる事ができますが
“カテゴリ”のテキストは
“vertical-align”と“text-align”が使えないため
中央には位置させれないと思います。
そこで、前述したcssのコードに“inline-block”を追加しました。
すると、たしかに“カテゴリ”のテキストはボックスの中央に位置できたのですが
今度は、ボックス自体が中央に位置しなくなりました。
そこで、今度はさっきとは真逆に前述したcssのコードから“inline-block”を消しました。
すると、今度はボックスもボックスの中のテキストも真ん中に位置していました。
“inline-block”は解除したのに何故ボックスの中の“カテゴリ”テキストまでが中央に位置しているのでしょうか?
うやむやにしたまま次の作業に移りたくないため
質問させて頂きました。
回答お願い致します。
回答3件
あなたの回答
tips
プレビュー