- ベストアンサー
画像に並ぶ文字の縦センタリングがズレてしまいます
daisy_kの回答
- daisy_k
- ベストアンサー率25% (1/4)
こんにちは。 まず、2点教えて頂きたいことがあるのですが、 (1)pictetさんが表示したいイメージは以下であっていますでしょうか？ ------------------------- ------ -画像- タイトル文言 ------ -------------------------- (2)divタグでtitleというクラスを指定されていますが、このtitleクラスは具体的にはスタイルシートでどのような定義をされているのでしょうか？ 私も専門家ではありませんが、上記2点をお教え頂けると、もう少しお役に立てるかもしれません。 尚、私がいつも参考にしているURLを載せておきます。HTMLに携わる方なら、ほとんどの方がご利用になっているのではないかと思います。既にご覧になっていたら読み捨ておきください。
関連するQ&A
- cssで枠内の文字をセンタリングさせたい
cssで枠内の文字をセンタリングさせたい ｜￣￣￣￣￣￣￣｜ ｜ 〇〇家｜ ￣￣￣￣￣￣￣ <body> ${afBlock('_emailer')}$ <!--block "_list.header" --> <!--block "_list.main.pageHeader" --> <div class="frame"> <div class="host cell">${host}$<span class="host_suffix">家</span></div> でセンタリングさせたいのは${host}$の部分にでる文字だけ（図でいう〇〇）です （単に text-align: center;を使用すると「家」の部分も含まれてセンタリングされてしまうので・・・ ちなみにセンタリングの幅は左枠線～「家」の前です（用は｜←この範囲→家｜） Cssはこうなってます div.frame div { position: absolute; } div.cell { border: 1px solid black; } div.host { left:0; top:5mm; width: 36mm; height: 9mm; text-align: right; vertical-align: bottom; padding-top:11mm; font-size:7mm; } span.host_suffix { font-size:5mm; }
- ベストアンサー
- CSS
- 画像を縦にそろえて表示させたいのです。
画像を縦にそろえて表示させたいのです。 リストボックスの中身を「△」（1up.gif）「▽」（1down.gif）で入れ替える。 そんな画面を作ろうとしています。（今は画像を並べているだけです。） 「△」(1up.gif) 「▽」(1down.gif) の２っのボタンはリストボックス脇の上端と下端にタテに並べたい所ですが どうしても添付の画像のようになってしまい悩んでおります。 ※の行で何かしらやればよいのかと align="left" や BR Clear=ALL などを試したのですが「▽」ボタンだけがリストボックスの下の行に配置されてしまいます。 皆様のお知恵を拝借したく思います。 宜しくお願いします。 htmlソース <body> <hr align="left" width="100%" SIZE="5"> <select size="15" name="Listbox1" style="WIDTH:200px" multiple> </select> <IMG src="../images/1up.gif" align="top"> ※ <IMG src="../images/1down.gif"> <hr align="left" width="100%" SIZE="5"> <div align="left"> <IMG src="../images/Set.gif" </body>
- ベストアンサー
- HTML
- 文章を、画像の縦方向の位置の中心に置きたい
ＣＳＳを使ってｗｅｂページのレイアウトをしています。 画像の高さの真ん中あたりに、文章を配置したいのですが、方法を教えてください。 「vertical-align：middle;」で指定してみたら１行の文ではうまく行ったのですが、複数行になるとうまくいきません。 どうすれば、複数行の文章で上手く指定できるでしょうか。 [ソース] <style> .test{ width:530px; height:263px; background-color:#ffcccc; font-size:10pt; } img{ vertical-align:middle; } </style> <div class="test"> <p> テキスト<br> テキスト<br> テキスト<strong>テキスト</strong>テキスト<br> <img src="画像のURL"width="250" height="259" alt="画像の名前"> </p> </div>
- ベストアンサー
- CSS
- 画像と水平線について
すみません。 htmlで画像の下に水平線を引いたのですが、 画像と水平線の間に空白が空いてしまいます。 画像と水平線を重ねることは可能なのでしょうか。 <html> <head> <body> <img src="/image/test.gif"> <hr size="0.5" noshade color="#c7ecf9"> </body> </html> よろしくお願い致します。
- ベストアンサー
- HTML
- CSSで画像の下のスペースをなくすには？
よろしくお願いします。 http://www.apple.com/jp/のようなナビゲーションタブ(？)をCSSでやろうと考えて、XHTML1.0strictで <div id="Navi01"> <img src="tab1.gif" alt=" " /><img…>・・・ </div> <div id="Navi02"> <p>あああ</p> </div> CSSで、 div#Navi01{margin: 0; vartical-align: middle;} div#Navi02{margin: 0; background-color: #00007f; color: white; font-size: small;} img{margin: 0; padding: 0; line-height: 0; vartical-align: middle;} と、記述していますが、Navi01の画像とNavi02のBOXの間に隙間が空きます。 この隙間は、どうやって無くせば良いのでしょうか？
- ベストアンサー
- HTML
- [携帯]divで指定した背景色から画像がはみ出す。
携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは </div> <div style="clear:both;～ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは <div clear="all" style="clear:both;"> <img src="./images/space.gif"> </div> </div> <div style="clear:both;～ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。
- 締切済み
- HTML
- スタイルシートでのセンタリングについて。
スタイルシートでセンタリングをしたいのですが、できなくて困っています。 以下のような場合に、センタリングをしようと思い「text-align:center;」を追加しましたがセンタリングされません。 どうしたらセンタリングできるでしょうか？ ソース ------------------------------------ <html> <head> <title></title> <style type="text/css"> <!-- .test{ font-size: 10pt; font-family: ＭＳ 明朝; margin: 1px; padding: 1% 10%; border: outset 1px #EEDDFF; } --> </style> </head> <body> <span class=test>○○○○○</span> </body> </html>
- ベストアンサー
- HTML
- W-ZERO3（WS003）でセンタリングされない
私はMK-BOARDという掲示板レンタルサービスを利用しているのですが、 その掲示板を閲覧するときにW-ZERO3から見ると[.block]がセンタリングされないのです。PCではIE6，Fire Fox，Chromeなどで表示確認しました。他にもWindows Mobileで動くOpera Mobileで確認したところ[.block]はセンタリングされていました。 これはIE MobileのCSSレンダリングに問題があるのか、若しくはDoctype宣言をしていないことによる後方互換の影響なのか 原因が全くわかりません。 ここにサイトのソースを記述いたします。 ちなみに[.block]などのクラスは掲示板に初めから <div class="block">などと記述されていました(CSS内には元々存在していなかった)のでそれを装飾しました。 ご指南を頂ければ幸いです。 <html lang="ja"> <head> <meta http-equiv="cache-control" content="no-cache"> <title>Guest Book</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ font-size:82%; background-color:#ffffff; color:#000000; margin-left:auto; margin-right:auto; text-align:center; width:470; } h1{ color:#000000; font-size:82%; } a{ text-decoration: none; } a:hover{ background-color: #CCCCFF; color: #0000FF; } /* ------------------------------ No、返信数 TOPテーブル ------------------------------ */ /* margin= 上、右、下、左 */ .block{ margin:10px 0px 10px 0px; border: dotted 1px #000000; width:300; margin-left:auto; margin-right:auto; text-align:left; } .block hr{display:none;} /* ------------------------------ 最下段ナビゲーション ------------------------------ */ .top{border: dotted 1px #000000;margin-top:10px;} /* ------------------------------ フォーム ------------------------------ */ .topmj{text-align:left;} /* ------------------------------ テーブル第一階層（レス番号、名前、時刻） ------------------------------ */ .p{ background-color: #000000; color:#ff0000; margin-bottom: 8px; margin-top: 8px; } /* ------------------------------ テーブル第二階層(コメント内部） ---------------------------------*/ .bbs{background-color: #FFFFFF;color:#000000;} .bbs a{} .bbs a:hover{background-color:#FFCC33;color:#ff0000;} --></style> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000" alink="#00ff00"> <h1 align="center">Page Title</h1><hr> <div class="bgcolor"> <div align="left"> <a href="AAA" accesskey="2">TEXT</a>/<a href="<div class="thread"><a href="TEXT">TEXT</a></div> ">TEXT</a>/<a href="#footer" name="head">▼</a><br> </div> <hr> <div align="left"><div><a href="http://tool-1.net/">フリーページ</a>☆<a href="http://tool-1.net/top30.html">人気サイト30</a>☆<a href="http://tool-1.net/navi/">FPサイトナビ</a></div></div> <hr> <div class="block"> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> </div> <hr> <div align="left"> <a href="AAA" accesskey="3">次へ</a>/<a href="#head" name="footer">▲</a><br>【<a href="AAA">TOP</a>】<br> <a href="AAA">選択</a>/<a href="AAA">説明</a>/<a href="login.cgi?id=marbo">編集</a>/<a href="regist.cgi">新規</a><br> </div> <div class="top"><div class="topmj" align="left"> 500 件中 1～10<br>[<a href="http://mk-board.net/">MK-BOARD</a>] </div></div> </div> </body> </html>
- 締切済み
- レンタルサーバ・ASP
- DIVタグでの表のセンタリング
ウインドウズXPプロ、ホームページビルダーV6.5でページを作成しています。エクスプローラーでの表示は全く問題ないのですが、ネットスケープ7.1やオペラ7.54で表示すると、DIVタグでセンタリングした表やHタグの背景がセンタリングされません。左寄りに表示されます。テキストや画像はセンタリングされています。 <DIV align="center"> や <DIV style="text-align:center"> ではネットスケープやオペラで表やHタグの背景をセンタリングすることは出来ないのでしょうか。
- 締切済み
- ホームページ作成ソフト
お礼
すばやいご回答、本当にありがとうございます。 質問が要領を得ず申し訳ありませんでした。 （１）→そうなんです。そのようにセンタリングしたいです。 （２）→お恥ずかしいことに、 タイトルだし、titleって宣言するもんなんだろうか。。。 と推測し指定してしまっていただけで、 スタイルシートのほうでtitleに対して何もフォーマットを定義はしておりませんでした。 すみません、手探りで切り張り切り張りしててお恥ずかしいです。 教えていただいたページも読み応えありそうで、 大変使えそうです（って生意気な物言いですが）。 ありがとうございます。