こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

HP制作初心者です。
現在自分のHPを作成しようとしているのですが、メニュー部分テキストについて
縦方向中央揃えが上手くできません。。
以下ソースなんですが、アドバイスいただけないでしょうか?

形としては、
blog profile portfolio が横並びで並ぶメニューを想定しています。

◆html
<div id="header">
<h1><img src="ロゴ画像" width="95" height="25" /></h1>
<div id="gNav">
<ul>
<li><a id="first" href="#">BLOG</a></li>
<li><a id="second" href="#">PORTOFOLIO</a></li>
<li><a id="third" href="#">PROFILE</a></li>
</ul>
</div>
</div>

◆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とかも試しましたが、、、駄目です。
何か凄く根本的なところで間違っていると思うのですが、、、ご指摘頂けると
助かります。

よろしくお願い致します。

投稿日時 - 2012-08-21 01:21:51

QNo.7654890

困ってます

質問者が選んだベストアンサー

vertical-alignを使う方向で、htmlを尊重しますと以下のcssに置き換えるではどうでしょう?
#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は消します。

投稿日時 - 2012-08-21 19:22:14

お礼

table-row全く気づきませんでした。ネットで「縦方向 中央揃え」で検索するとtable-cellに辿り着くのですが、意味を解釈できてませんでした。。。丁寧な回答本当にありがとうございました!

投稿日時 - 2012-08-21 23:14:39

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

【引用】____________ここから
このプロパティは、行ボックス内における、インラインボックスの垂直方向の位置を指定する。 以下の値は、親インライン要素、あるいは匿名インラインボックスを生成する親ブロック要素を参照できる場合にのみ意味を持つ。 そのような親を持たない要素に対しては何の効果も無い。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル詳細( 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;}

投稿日時 - 2012-08-21 09:14:53

お礼

有難うございます!参考サイト見て、、、勉強します!本当助かります。

投稿日時 - 2012-08-21 23:12:24

あなたにオススメの質問