- 締切済み
vertical-alignしたのに中央配置しない
お世話になります。 Webデザインで基本的なことかもしれませんが、ご教授ください。 サイトのレフトメニュー欄にページ内アンカーリンクボタンを設置しています。 分からないのはspan.title02で指定したテキストが親要素であるspan.leftmenu_titleでbackground-imageで表示している画像の真ん中にきちんと表示されないことです。 一応インライン要素に指定しvertical-align:middle;指定しているのですが、これはどうしてでしょう。 画像の上部（top）に表示されどうしてもアンバランスに見えてしまいます。 どうかご教授ください。 HTML---- <div id="leftmenu"> <h2><a href="#concept"><span class="leftmenu_title"><span class="title02">コンセプト</span></span></a></h2> <h2><a href="#walls"><span class="leftmenu_title"><span class="title02">業務案内</span></span></a></h2> <h2><a href="#shisetsu"><span class="leftmenu_title"><span class="title02">施設紹介</span></span></a></h2> <h2><a href="#access"><span class="leftmenu_title"><span class="title02">アクセス</span></span></a></h2> </div> CSS---- .leftmenu_title { display:block; font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; background-image:url(../images/leftmenu_title.jpg); width:190px; height:20px; text-align:right; padding:0 10px 0 0; margin:10px 0; } .leftmenu_title:hover { background-image:url(../images/leftmenu_title_on.jpg); } .title02 { display:inline; font-size:small; color:#FFFFFF; vertical-align:middle; }
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
前回回答したときは画像が見えなかったのですが、そうしたいなら ★一行の高さを指定するだけで、当然テキストはその中心におかれる。背景画像の高さと同じline-heightを指定するだけです。 タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.section{position:relative;font-size:14px;} div.section div.nav{ ＿position:absolute;top:0;left:-200px; ＿width:190px;height:100%; ＿line-height:20px;/* これで行の高さが決まる */ ＿margin-left:0; ＿border:solid 1px gray; } div.section div.nav ul,div.section div.nav ul{ ＿display:block;list-style:none;margin:0;padding:0; } div.section div.nav ul li{margin:5px 0;} div.section div.nav ul li a{ ＿display:block; ＿margin:5px;padding:5px; ＿color:white;background-color:rgb(200,160,0); ＿font-weight:bold;text-decoration:none;text-align:right; } div.section div.nav ul li a:hover{background-color:red;} div.section div.nav ul li a:active{background-color:lime;} /* サンプルのため */ html,body{margin:0;padding:0;} div.header,div.footer{min-height:100px;background-color:silver;border:1px solid silver;} div.section{min-height:300px;margin:0 5px 0 200px;width:auto;border:solid 1px gray;} p{text-indent:1em;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>サイトの案内</h2> ＿＿<p>一行の高さを指定するだけで、当然テキストはその中心におかれる。背景画像の高さと同じline-heightを指定するだけです。</p> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="#concept">コンセプト</a></li> ＿＿＿＿<li><a href="#walls">業務案内</a></li> ＿＿＿＿<li><a href="#shisetsu">施設紹介</a></li> ＿＿＿＿<li><a href="#access">アクセス</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
vertical-align:プロパティは、tableのcellのみ有効です。 vertical-align' ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align ) Applies to: inline-level and 'table-cell' elements inline-level・・行内レベルの画像などをどのように配置するかと、tableのコマ内の配置 ただ、それ以前にHTMLとして重要な誤りがあります。h1～h6は、ある文書集合の見出しです。見出しだけが並ぶことはない??句か森５では禁止です・・ この部分は明らかにナビゲーションリストですから、HTMLは <div class="nav"> <ul> <li><a href="#concept">コンセプト</a></li> <li><a href="#walls">業務案内</a></li> <li><a href="#shisetsu">施設紹介</a></li> <li><a href="#access">アクセス</a></li> </ul> </div> であるはずです。簡単でしょ!!。 HTMLは文書構造を記述するもので、デザインは考えません。【文書構造とプレゼンテーションを分離する】・・とっても大事なことです。HTML5では、もっと簡単に <nav> <ul> <li><a href="#concept">コンセプト</a></li> <li><a href="#walls">業務案内</a></li> <li><a href="#shisetsu">施設紹介</a></li> <li><a href="#access">アクセス</a></li> </ul> </nav> となります。 これをスタイルシートでデザインするわけですが、それも簡単にわかりやすくなります。 div.nav{ /* ナビゲーションブロックの設定 */ font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; width:200px; position:absolute; top:100px;left:10px; } div.nav ul,div.navul li{/* ナビゲーションリストの設定 */ display:block;list-style:none;margin:0;padding:0; } div.nav ul li{/* リスト項目の設定 */ width:190px;height:20px; text-align:center; line-height:20px;/* ★行の高さを20pxにする */ } div.nav ul li a{ width:100%;height:100%; background:url(../images/leftmenu_title.jpg) 50%; font-size:small; color:#FFFFFF; border:outset 2px gray; } div.nav ul li a:visited{color:lime;} div.nav ul li a:hover{ background-image:url(../images/leftmenu_title_on.jpg); } div.nav ul li a:active{border-style:inset} ★きちんと子孫セレクタ(半角スペース)でつなげることで他のul/liに影響しないで特定の場所を指定できます。 ★変なクラス名をつけてないので将来横に並べたければ、 div.nav ul liに、float:left;なり、display:inline-block とすればよい。 また、右(left:10px;→right:10px;)におくかもしれないし、ウィンドウのトップに置くかもしれない。 ★HTMLはデザインのために書いてはならない。文書構造がわからなくなる。 ★セレクタの書き方を勉強しましょう。それでclass名の大部分は要らない
