締切済み

vertical-alignしたのに中央配置しない

2012/02/02 01:25

お世話になります。 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; }

toonie
お礼率26% (55/210)

CSS
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/03 00:54 回答No.2

前回回答したときは画像が見えなかったのですが、そうしたいなら ★一行の高さを指定するだけで、当然テキストはその中心におかれる。背景画像の高さと同じ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">  ＿</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)

2012/02/02 09:04 回答No.1

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名の大部分は要らない

ログインすると、全ての回答が全文表示されます。