css:縦方向中央揃えについて

Question

HP制作初心者です。現在自分のHPを作成しようとしているのですが、メニュー部分テキストについて縦方向中央揃えが上手くできません。。以下ソースなんですが、アドバイスいただけないでしょうか？形としては、 blog　profile　portfolio　が横並びで並ぶメニューを想定しています。 ◆html ◆CSS #header h1 { width: 95px; height: 25px; margin:auto; } #gNav { width: 570px; height: 38px; margin: 0 auto; padding: 0; background-image: url(gNav背景.png); background-repeat: no-repeat; } #gNav li { text-align: center; float: left; } li #first { width: 105px; height:38px; background-image:url(#first背景.png); background-repeat:no-repeat; } ※#second,#thirdも#firstと同様です。 #gNav li a { vertical-align: middle; } 以上です。vertical-alignが効けば問題無いと思うのですが、動作しません。display table-celとかも試しましたが、、、駄目です。何か凄く根本的なところで間違っていると思うのですが、、、ご指摘頂けると助かります。よろしくお願い致します。

DrFell · Accepted Answer

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とはああああ的な事です。出来なかったソースではliというブロック要素をまたいでいるので同列にはなりません。

table-cellは惜しかった。どこからどこまでがtrにあたるのかを指定してやってください。tableに変えるのでfloat:leftは消します。

ORUKA1951 · Answer

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからこのプロパティは、行ボックス内における、インラインボックスの垂直方向の位置を指定する。以下の値は、親インライン要素、あるいは匿名インラインボックスを生成する親ブロック要素を参照できる場合にのみ意味を持つ。そのような親を持たない要素に対しては何の効果も無い。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align )］より　よって、そのような場合は使えません。　なら、 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;}

css:縦方向中央揃えについて

vertical-alignを使う方向で、htmlを尊重しますと以下のｃｓｓに置き換えるではどうでしょう？

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング