• ベストアンサー

画像の縦位置について

最近、テンプレートなどを使ってHPの作成に 取り組み始めた初心者です。 画像の縦の位置を調整したいのですが、 うまく行きません。 「～middle」を使うのかなと思っていろいろと試行錯誤、 例えば、 <p class=\"middle\"> <img scr=\"～\",～～～～,class=\"middle\"> とかやってみましたが、駄目でした。 （皆目、見当違いなのかもしれませんが、…） 特に今まではテンプレートの画像設定で規定の画像が中央にあっても、 アフィリタグを入れると位置が乱れます。 お分かりの方はご教授頂けると幸いです。 どうぞ宜しくお願い致します。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • hegemon
  • ベストアンサー率72% (21/29)
回答No.1

class="...."の部分には、通常はCSSなどで定義したクラス名が入るのですが、middleというクラスがどこかで定義されているのでしょうか？ class=\"middle\"とエスケープが入っているので、テンプレートの処理系が何かを埋め込んでくれるのかもしれませんが、どのような処理系なのかがわからないので……。

tm1919
質問者

お礼

HPなどをいろいろ検索して、試行錯誤してみたのですが、 よくよく確認するとご指摘のそもそものCSSにその定義が ありませんでした。一度、試して見ます。 ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

noname#137826
noname#137826
回答No.2

No. 4965533 と同じ全くご質問ですね？ 質問はどちらか片方にすべきです。

tm1919
質問者

お礼

すいません。。。 操作ミスで二つになってしまったようです。 こちらを締め切ります。 ご指摘ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 画像の縦位置について

    最近、テンプレートなどを使ってHPの作成に 取り組み始めた初心者です。 画像の縦の位置を調整したいのですが、 うまく行きません。 「～middle」を使うのかなと思っていろいろと試行錯誤、 例えば、 <p class="middle"> <img scr="～",～～～～,class="middle"> とかやってみましたが、駄目でした。 （皆目、見当違いなのかもしれませんが、…） 特に今まではテンプレートの画像設定で規定の画像が中央にあっても、 アフィリタグを入れると位置が乱れます。 お分かりの方はご教授頂けると幸いです。 どうぞ宜しくお願い致します。

  • img の align 属性を css に変更したいが、位置がずれる

    img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top　上端に合わせます。 ■middle　中央に合わせます。 ■bottom　下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。

    • ベストアンサー
    • 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
  • 画像の表示位置について

    質問があります。 小さな画像(162×82)の画像をブラウザのど真ん中に 表示させたいのですがどうしてもうまくいきません。 <HTML> <BODY> <CENTER><IMG SRC="top.bmp"></CENTER> </BODY> </HTML> ↑もちろんこれだと画像のセンタリングしかできません。 縦位置、横位置、ともに真ん中（ブラウザの中央）に おきたいです。

    • ベストアンサー
    • HTML
  • CSSで画像を同じ位置に重なり合わせるには？

    お世話になります。 2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。 調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。（添付画像のような現象です） これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配置することはできないのでしょうか？ 素人ゆえおかしな質問しているかもしれませんが、どうかご教授お願いします。 現時点のHTML/CSSはこんな感じです。 HTML--- <div id="contens"> <div id="top_img_a"> <p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p> <p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p> </div> CSS---(本意ではありませんが、やむなくtop,left調整で位置を作っている段階です。) #top_img_a { width:900px; margin:0; padding:0; position:relative; top:0px; } .img_top { position:relative; z-index:1; top:0; left:25px; } .flame { position:relative; z-index:2; top:-216px; left:25px; }

    • ベストアンサー
    • CSS
  • Excel2007テキストボックスの縦位置均等割り付け方法

    Excel2003では、テキストボックスの中のテキストに対して、縦位置の均等割り付けができたのですが、Excel2007で同じことをする方法が見つかりません。やり方を教えてもらえますか。それとも、機能がなくなったのでしょうか。 テキストボックスの大きさを変えたり、行間を試行錯誤で調整するのではなく、Excel2003のように均等割り付けをしたいのですが。

  • 画像をボックスの中心に位置付けたい…

    ネットで調べていくつかのパターンを試してみましたが、 vertical-align:middle;が全然かかりません。。。 同じボックスをいくつも作ってその中に様々なサイズの画像を配置したいのです。 .bb_box{ width:210px; height:90px; display:table-cell; text-align:center; vertical-align:middle; layout-grid-line:90px; } .b_img{ vertical-align:middle; } <div class="bb_box"><img src="○○○" alt="○○" width="91" height="33" border="0" class="b_img" /></div> 間違い箇所がたくさんあるかと思いますがご教示ください。よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 画像の横にテキストを縦方向中央に配置したい

    画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。 このHTNLの記述では無理でしょうか？

    • ベストアンサー
    • CSS
  • テキストと画像の縦の中央揃えの質問です

    下記の参考サイトのサイトマップをホームページ作成の練習として作成中です http://lolipop.jp/home/sitemap/ テキストリンクの左右に画像が配置されております。 左の画像は<dd>の背景画像。 右の画像は<img>でテキストリンクの右横に配置されてます(html)。 <dd><a>テキスト</a><img></dd> 左は上手くいくのですが、右の星型の画像が上手く配置されません。 <img>にvertical-align：middleを指定するのですが、各ブラウザでばらつきがあり、均一になりません。 テキストリンク、画像が縦に中央配置されません。 求めていることは、<dd>の中で、テキストリンク、画像を縦に中央配置させたいと思っております。 <dd>の高さは26px フォントサイズは13px <img>は、高さ17px、幅17px が希望です。 どのように、html、ｃｓｓを指定すれば各ブラウザで均一に表示されるでしょうか？

    • ベストアンサー
    • CSS
  • before疑似要素で画像を指定した場合の文字位置

    いつもいつもお世話になっています。 before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると 次にくる文字の位置(縦)が画像の下のラインに合っています。 画像の中央から文字を開始したいのですが、なかなかうまいこといきません。 なにとぞ、ご教示ください。 現在は、以下のように指定しています。 --------------------------------------------------------- CSS --------------------------------------------------------- .test{ border:1px solid #39C; color:#006699; } .test:before{ float:left; padding-top:0px; padding-right:10px; content: url("../img/icon.gif"); } --------------------------------------------------------- HTML --------------------------------------------------------- <p class="test"> あああああ </p>

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する