- ベストアンサー
vertical-align:middleをFirefoxで実現させたい
bhkhkの回答
- bhkhk
- ベストアンサー率33% (2/6)
#navi li{ display:inline; list-style-type:none; margin:15px; vertical-align:middle; line-height:(ロゴの高さ) } でどうでしょうか？
関連するQ&A
- ナビゲーションを横並びにして真ん中配置にしたい
ナビゲーションをulタグを使って作り、横並びにしています。 さらにそれをブラウザの真ん中に配置したいのですが、真ん中になってくれません。 HTMLは以下のようにしています。 <div id="menu_top"> <ul> <li>Profile</li> <li>Information</li> <li>History</li> <li>Invitation</li> </ul> </div> CSSは以下のとおりです。 #menu_top{ margin:auto; width:90%; height:20px; text-align: center; } #menu_top li{ float:left; list-style-type:none; margin:15px; } あとbody要素にはtext-align:centerを入れています。 現状では、ナビゲーション自体は横並びになるものの、左に寄っています。横並びのまま、真ん中に表示させるにはどのようにしたらいいでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- vertical-align
div#input { font-size:16px; width: 162px; height: 36px; border:solid 2px #000000; background-image: url("bn/ba042.gif"); padding:2px; margin:3px; list-style : none; border : none; vertical-align: middle; } <div id="input"><a href="">こんばんは！</a></div> 「こんばんは！」の文字が上についた状態（ＴＯＰ）になっているので、真ん中に配置しようと vertical-align: middle; を入れたのですが、 何故か真ん中に表示されません。 ＩＥは６．０ですが、他の値（top bottom 他）も含め対応になっています。 どこがおかしいのでしょうか？よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- vertical-alignについてお尋ねします。
htmlコーディングで、以下のようにliタグにimgタグを埋め込みました。 <ul> <li><img ～ height="18px" ></li> <li><img ～ height="18px" ></li> </ul> CSSでは、 ul li { padding-bottom: 4px; } としたのですが、実際にブラウザで表示させてみると画像の高さ18px＋padding-bottom4px分以上の高さとなり、二つのliの間が広くなってしまいました。 そこで、imgタグに「vertical-align:top;」と記述したところ、見た目上正しい位置に治りました。 こういった現象は起きてしまうものなのでしょうか？
- ベストアンサー
- HTML
- text-align centerの違い
div内にリンクを書くとセンターを基準に表示されるのですが div内にulとliでメニューを組むとセンターを基準に表示されず 左を基準に表示されてしまうのですがどのようにすれば いいものでしょうか？ ---CSS--- #hoge { width: 1000px; text-align: center; background: #fff; } ---HTML--- ↓この場合センター表示されます。 <div id="hoge"> <a href="#">hoge</a> </div> ↓この場合センター表示されず左を基準に表示されます。 <div id="hoge"> <ul> <li><a href="#">hoge</a></li> </ul> </div>
- ベストアンサー
- HTML
- 【span,vertical-alignの動作】
Webサイトのヘッダー部分によくある横並びのボタンを画像で用意しようと思うのですが、左端の画像はボタンより縦に大きいサイズのロゴを入れたいのです。 すると、横に並ぶボタンはロゴの底部に揃って並びますが、これらのボタンを指定のピクセル上に移動させて表示したいと考えています。これはvertical-align: middle;ではなく、任意の数値で動かしたいです。 また、ロゴは左端のままで、ボタン画像はセンタリングさせたいとも考えています。そこで、 <span class="head"><a href="x"><img src="y"></a><a href="x2"><img src="y2"></a><a href="x3"><img src="y3"></a></span> <style type="text/css"> .head { text-align:center; } </style> ひとまず自分で調べつつ上記のように書いてみましたが、Web上ではセンタリングしてくれません。教えて頂きたい要点としては、 1.任意のpx数を指定して横並びの画像を上下揃えする方法 2.一行内の部分的なセンタリングにおける上記構文の誤りのご指摘 になります。なにぶん素人ですので、気づいていないこともあるかと思います。 どうぞお願いします。
- 締切済み
- CSS
- htmlで縦の中央揃えが上手くいきません。
htmlで縦の中央揃えが上手くいきません。 vertical-align : middleでいけると思われるのですが、上手くいきません。 下記の部分です。 <div style="vertical-align : middle;"> <a href="http://www.yahoo.co.jp/"><img src="logo.png" /></a> > <a href="http://okwave.jp">okwave</a> > thispage </div> 何か間違えているでしょうか？ それとも、テキスト以外は揃わないのでしょうか？
- 締切済み
- HTML
- リストタグを横並びにする方
横並びのナビゲーションを作成するためにスタイルシートの解説本で調べて 【html】 <div id="navi"> <ul> <li><a href="toiawase.html">問い合わせ</a></li> <li><a href="accsess.html">アクセス</a></li> <li><a href="top.html">TOP</a></li> </ul> </div> 【css】 ul#navi li { float: right; } ul#navi li a { display: block; text-decoration:none; } と記述しましたがうまくできず、頭のulを取ったら出来ました。 タグの位置がセレクタの前と後では、どう違うのでしょうか？ また、ulを入れずに進めても問題ないでしょうか？
- ベストアンサー
- CSS
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 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とかも試しましたが、、、駄目です。 何か凄く根本的なところで間違っていると思うのですが、、、ご指摘頂けると 助かります。 よろしくお願い致します。
- ベストアンサー
- HTML
- 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; }
- 締切済み
- CSS
お礼
line-heightを足してみましたがうまくいきませんでした。 No１、２の方のやり方でやらせていただきました。 ご回答いただいてありがとうございました！！