- 締切済み
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> 何か間違えているでしょうか？ それとも、テキスト以外は揃わないのでしょうか？
- webuser
- お礼率85% (1391/1635)
- HTML
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
vertical-alignの適用対象は、行内レベル要素及び'table-cell'要素 であること。 divはブロックレベル要素ですので、あてはまりません。 行内レベル要素（インライン要素）はおっしゃあるようにテキストの感覚ですね。a要素もimg要素も行内レベル要素です。他にstrongも行内レベルです。imgはブロックーインライン要素というブロックレベル要素とインライン要素を併せ持つ要素になります。行の中に改行せずに入ります。 divや見出し、テーブルや箇条書きなどはブロックレベル要素です。ブロック要素は行の中に入れません。要素の前後に改行が入ります。ブロック要素は高さや幅を持てますし、paddingやmarginもおおむね思っておられるように作動します。が、インライン要素は、高さや幅を持てません。paddingやmarginも思っておられるようには作用しない筈です。 性格がまるで違うのです。このあたりは、ｃｓｓでデザインする場合基本ですのでしっかり調べて把握してください。ちゃんとした初心者教習本なら必ず説明がある項目ですので、初歩から学び直しされることをお勧めします。 で、vertical-alignをdivに効かせようとする場合には「行内レベル要素及び'table-cell'要素 」である必要があります。なので、table-cell要素にすれば、いいんですよ。display:table-cellなんてね。これだけでは効かないのですが、そのへんはwebuser さんがお調べください。 ｃｓｓの仕様書の邦訳のページをご紹介しますね。 http://www.y-adagio.com/public/standards/tr_css2/visudet.html#propdef-vertical-align http://www.y-adagio.com/public/standards/tr_css2/visuren.html#propdef-display
- sanzero
- ベストアンサー率56% (58/102)
下記、参考にどうぞ http://c-brains.jp/blog/wsg/11/10/13-200523.php ※提示されたdivは高さが内容分しかないんじゃないでしょうか？
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
vertical-alignが使えるのはインライン要素とテーブルセルのみ～
関連するQ&A
- 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
- 画像の横にテキストを縦方向中央に配置したい
画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。 このHTNLの記述では無理でしょうか？
- ベストアンサー
- CSS
- セルをリンクにしたときの揃え位置
http://www.htmq.com/style/vertical-align.shtml こちらを参考にセルのリンクを作成しました。 セル中の文字の縦揃えを中央揃えにしようと<td style="vertical-align:middle">としたのですが、反映されず困っております。 リンクの定義部分でA{vertical-align:middle}とも試しましたが変化ありませんでした。 どのようにすれば可能になりますでしょうか？
- 締切済み
- HTML
- vertical-align:middleをFirefoxで実現させたい
ナビゲーションをhtmlで以下のように記述しています。 <div id="navi"> <ul> <li><a href="index.html"><img src="images/rogo_s.gif" /></a></li> <li><a href="information.html">Information</a></li> <li><a href="history.html">History</a></li> <li><a href="invitation.html">Invitation</a></li> <li><a href="members.html">For members</a></li> </ul> </div> cssは以下のとおりです。 上記のナビゲーションを横並びにしています。 #navi li{ display:inline; list-style-type:none; margin:15px; vertical-align:middle; } liの先頭にはロゴ画像を配置しています。 ロゴは、テキストで記述したメニューよりも高さがあるので、横並びにしたときに、下揃えになってしまいます（vertical-align:bottomのイメージ）。 そこで上記のように、cssに「vertical-align:middle」を加えたところIE7では思い通りになりましたが、Firefoxでは下揃えのままになってしまいます。 Firefoxでも真ん中揃えにする方法はないでしょうか？
- ベストアンサー
- HTML
- 画像の縦サイズが小さいと隙間が・・・
縦のサイズが小さい画像を縦に並べると、隙間ができてしまいます（IE6）。 隙間を空けずに、縦方向にぴったりとくっつけたいので困っています。 ネットで調べて色々な方法で試してみましたが、解決しません。 IE6ではあきらめるしかないのでしょうか。 どなたか解決策があれば知恵をかしてください。よろしくおねがいします。 （例） <div style="width:100px; background-color:red;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> </div>
- ベストアンサー
- HTML
- 同一セルでの垂直方向の位置揃えについて
同一セルでの垂直方向の位置揃えについて よろしくお願いいたします。 tableタグを使用して表を作成しております。 最後の列のセルだけテキストとimgを配置したいのですが、 その際、テキストは必ずセル内中央に、imgは必ずセル内下部に配置するような 事は可能でしょうか？ 行によって高さが変わるのでmargin,padding等ではセル内の特定の位置に表示できず、 vertical-alignをセルに適用すればどちらかは出来るのですが、 同一セル内で vertical-align:middle; vertical-align:botom; のような事が同時に実現出来る指定などあるでしょうか？ 下記のような感じなんですが、 <table> <tr> <td>このセルは高さが100px</td> <td>テキストは中央にimgは下部に配置したいセル <a href="a.html"><img src="a.jpg" height="10" /></a> </td> </tr> <tr> <td>このセルは高さが200px</td> <td>テキストは中央にimgは下部に配置したいセル <a href="b.html"><img src="a.jpg" height="10" /></a> </td> </tr> </table> どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- CSS：文字の上下の中央揃え
h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか？ 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "ＭＳ ゴシック"; background-color: #88ceff;}
- ベストアンサー
- HTML
- CSSでロールオーバーを作って中央揃えにしたい。
CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------
- ベストアンサー
- その他([技術者向] コンピューター)
- DIVボックス内でのCSSを使用した縦位置指定方法
CSSにてheight、weightを指定したDIVタグの中にテキストを記述し、縦位置の中央揃えを行いたいのですが、方法がわかりません。 "vertical-align:middle;"などを指定しましたが、適用されませんでした。 スタイルに関することは全てCSSで行いたいので、TABLEタグなどでvalignを指定する方法は取りたくありません。 何かいい方法をご存知の方がいらっしゃいましたら、ご回答をよろしくお願いいたします。
- 締切済み
- HTML
