- ベストアンサー
CSS: 縦方向中央揃えについて
- HP制作初心者の方が、自分のHPのメニューテキストの縦方向中央揃えが上手くできないという問題を抱えています。
- 提供されたHTMLとCSSのコードを見たところ、vertical-alignプロパティが効かない問題があるようです。
- 解決策としては、メニューテキストにline-heightプロパティを設定することで縦方向中央揃えができるようになります。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
vertical-alignを使う方向で、htmlを尊重しますと以下のｃｓｓに置き換えるではどうでしょう？ #header h1 { width: 95px; height: 25px; margin:auto; } #gNav { width: 570px; height: 38px; margin: 0 auto; padding: 0; background-image: url(画像url); background-repeat: no-repeat; } #gNav ul{ display:table-row;/*liをテーブルのセルにするなら、テーブルの1行を指定する必要があります。*/ } #gNav li {/*liはブロック要素。画像が1個を使いまわしなら #gNav liで指定します。li #first と統合しました。*/ text-align: center; display:table-cell;/*ご希望のもの*/ vertical-align: middle;/*ご希望のもの*/ /*float: left;*/ width: 105px; height:38px; background:#ccc url(画像url); background-repeat:no-repeat; } /*これは効かないでしょ？消します。 #gNav a { vertical-align: middle; }*/ インライン要素の性質とブロックレベル要素の性質を理解していないのがうまく行かない原因かと思います。 インライン要素（例えば<a>）にwidthやheightは思われているような解釈にはcssではなりません。widthはそもそも効きませんし、heightは効きますが、効き方が思われているのとは違うと思います。 すごく根本的な事、インライン・ブロックレベルの違いは基礎中の基礎です。vertical-alignはインライン要素とテーブルセルにしか効きません。この場合のインライン要素のvertical-alignとは<span style="font-size:3em">あ</span><span style="font-size:2.5em">あ</span><span style="font-size:2em">あ</span><span style="font-size:1.5">あ</span>的な事です。出来なかったソースではliというブロック要素をまたいでいるので同列にはなりません。 table-cellは惜しかった。どこからどこまでがtrにあたるのかを指定してやってください。tableに変えるのでfloat:leftは消します。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから このプロパティは、行ボックス内における、インラインボックスの垂直方向の位置を指定する。 以下の値は、親インライン要素、あるいは匿名インラインボックスを生成する親ブロック要素を参照できる場合にのみ意味を持つ。 そのような親を持たない要素に対しては何の効果も無い。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align )］より よって、そのような場合は使えません。 <body> <div class="header"><!-- headerはひとつの文書の中に複数登場しうるのでclass --> <h1>見出</h1> <div class="nav"> <ol> <li><a href="/">トップ</a></li> <li><a href="/news">ニュース</a></li> <li><a href="/product">製品</a></li> <li><a href="/contact">問合せ</a></li> </ol> </div> </div> なら、 div.header{width:80%;min-width:800px;max-width:900px;margin:0 auto;} div.header div.nav{width:100%;line-height:38px;text-align:center;} div.header div.nav ol,div.header div.nav ol li{display:block;list-style-type:none;margin:0;padding:0;} div.header div.nav li{width:24%;float:left;position:relative;} div.header div.nav li a{display:block;width:100%;height:100%;border:outset 3px gray;} とかで済むはずです。古いブラウザを対象としないなら div.header{width:80%;min-width:800px;max-width:900px;margin:0 auto;} div.header div.nav{width:100%;line-height:38px;text-align:center;} div.header div.nav ol,div.header div.nav ol li{display:block;list-style-type:none;margin:0;padding:0;} div.header div.nav li{width:24%;display:inline-block;position:relative;} div.header div.nav li a{display:block;width:100%;height:100%;border:outset 3px gray;}
お礼
有難うございます！参考サイト見て、、、勉強します！本当助かります。
お礼
table-row全く気づきませんでした。ネットで「縦方向 中央揃え」で検索するとtable-cellに辿り着くのですが、意味を解釈できてませんでした。。。丁寧な回答本当にありがとうございました！