• 締切済み

cssで画像を中央に表示する方法

http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように２つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか？

  • CSS
  • 回答数4
  • ありがとう数0

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.4

参考のページの ■imgに埋め込んだclassを使って画像を中央揃えする方法。 にも、 「imgをブロック要素にしてからmargin指定を書くことで中央揃えに出来ます。（display:block;をmarginより先に書くのがコツ。）」 と明記されていますが、どうして削除したのでしょう？（蛇足：理解はしていないが解説してますてきなページなのでそのサイトで学習するのはお勧めできません。） ブロックレベル要素とインライン要素には、性質が大きく違いますので、これをきっかけに学ばれてはいかがでしょうか？ ちなみに、imgはインライン要素の中でも、インラインブロック要素というちょっと特殊な要素になります。 箱の中にビー玉を入れ、その箱を机の上に置くイメージをして下さい。 インライン要素への指定、text-align:centerや、left,rightはビー玉を箱のなかのどこに揃えるか（傾けるか）への指示です。箱の中でビー玉の数が多ければ左から右に上から下に詰まります。そしてその1列づつに対して右にするのか中央にするのか左にするのかの指示がtext-alignでの指定になります。インライン要素は通常高さや幅を持てません。画像タグを並べると文字のように並べられますよね。これが、インライン要素の特長で改行を含まない要素です。インライン要素は他にもa要素やstrong要素があります。 その箱の大きさを決めるのが、ブロックレベル要素へのwidthとheight となります。その箱の机に置く位置が、今回の場合はmarginとなります。左右ともautoなので中央というわけです。ちなみに、箱のwidthが決まっていなければ、中央とはなりません。width、marginの左右がautoのセットで、中央になります。箱の大きさが決まっていなければ何を基準に中央にすればいいのかわからないので当然ですよね。ブロック要素は通常前後に改行を含みます。見出しやp要素、箇条書き、表などもブロック要素です。 で、今回のimg要素は、インラインーブロック要素。外向きにはインラインで、内向きにはブロック要素となり、インライン要素の１つです。外部に対してはインラインなので画像を文字のように並べる事も可能ですし、内向きにはブロック要素なので、高さや幅を持て、paddingなども思った感じに効かせることが可能です。 上記を含めその他の特長は以下のページがまとまっているように思います。ブロックレベル要素とインライン要素はhtml+cssを理解するうえで重要な概念ですので、しっかり学ばれることをお勧めします。 ブロックレベル要素とインライン要素 - Web標準普及プロジェクト - もじら組 mozilla.gr.jp/standards/webtips0015.html

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

すみません。http:の置換が完了していませんでした。 ★タブは＿に置換してあるので戻す。 ★http：//はhttp：//に置換してあるので戻す。 <!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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} div.section div.section{width:auto;min-width:0;margin-left:2em;} div.section{position:relative;} div.section p img.mainPhoto{display:block;width:80%;height:auto;margin:20px auto;} div.section div.figure{width:90%;margin:10px auto;position:relative;text-align:center;border:solid 1px silver;} div.section div.figure img{width:80%;height:auto;margin:5px auto;} div.section div.figure p{width:80%;margin:0 auto;text-align:left;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは画像はWikiの物を使用しています。</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<p><img src="http：//upload.wikimedia.org/wikipedia/commons/d/d5/FujiSunriseKawaguchiko2025WP.jpg" width="400" height="300" alt="富士山" class="mainPhoto">は、山梨県（富士吉田市、南都留郡鳴沢村）と静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）に跨る活火山である。標高3,776 m、日本最高峰の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Mount_Fuji_from_Hotel_Mt_Fuji_1995-2-7.jpg/1024px-Mount_Fuji_from_Hotel_Mt_Fuji_1995-2-7.jpg" width="420" height="258" alt="冠雪した富士山を山中湖から眺める"> ＿＿＿＿<div class="figcaption"> ＿＿＿＿＿<p>山中湖湖畔から見た富士山の雄姿</p> ＿＿＿＿</div> ＿＿＿</div> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿＿<ul> ＿＿＿＿<li>HTMLには文書構造しか書かれていないためHTMLのメンテナンスも容易で、HTMLに手を加えることなくデザインは自由に多彩に変更できる。</li> ＿＿＿＿<li>class名のheader,section,footer,figure,figcaptionはHTML5の新しい要素の使い道に合わせてあるため、そのままHTML5の要素に変更できます。 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>&lt;div class="header"&gt;&lt;/div&gt;→&lt;header&gt;&lt;/header&gt;</li> ＿＿＿＿＿＿<li>&lt;div class="section"&gt;&lt;/div&gt;→&lt;section&gt;&lt;/section&gt;</li> ＿＿＿＿＿＿<li>・・・・・・・・・</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿＿ ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

とても酷いサイトを参考にされているようですね。 ★そもそもデザインのためにHTMLを書いていたらデザイン変える時にどうするの(^^) ＞imgをdivで囲ってdivにCSSを指定すると上手く中央揃えが可能です。 ＞<div class="center"><img src="icon.jpg" /></div> 　気が変わって左寄せにしようとなったらHTML書き直すか、div.center{text-lign:left;} 　スタイルシートを利用する最大の目的『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』を理解できていない。 　まず、HTMLをきちんとマークアップします。その際はデザインではなく、あくまで文書構造をマークアップします。XHTMLは面倒くさいし、XMLが必要でない世界では、多分廃れていくと思いますからHTML4.01strictが良いでしょう。後方互換を考えないならHTML5 ＞しかし、img class="line" の方でも、画像のサイズは調整できています。 　左右のマージンだけでなく画像サイズも調整したいと言うことでしたら、そのようにデザインしてみましょう。 ★class名は文書構造を補完する物でlineとかcenter、leftのようにデザインを指定するものではない。HTMLもスタイルシートもメンテナンスが楽になります。 ＞「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 　サンプルのように簡単にできます。 　ただし、そのためにclassを書くのではなく、HTMLの文書構造に従って・・classをつけるのでしたら、あくまでその画像の所属するクラスを書くと考えると良い。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済みのHTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。 ★http:// はhttp：//に置換してあるので戻す <!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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} div.section div.section{width:auto;min-width:0;margin-left:2em;} div.section{position:relative;} div.section p img.mainPhoto{display:block;width:80%;height:auto;margin:20px auto;} div.section div.figure{width:90%;margin:10px auto;position:relative;text-align:center;border:solid 1px silver;} div.section div.figure img{width:80%;height:auto;margin:5px auto;} div.section div.figure p{width:80%;margin:0 auto;text-align:left;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは画像はWikiの物を使用しています。</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<p><img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/FujiSunriseKawaguchiko2025WP.jpg" width="400" height="300" alt="富士山" class="mainPhoto">は、山梨県（富士吉田市、南都留郡鳴沢村）と静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）に跨る活火山である。標高3,776 m、日本最高峰の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<div class="figure"> ＿＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Mount_Fuji_from_Hotel_Mt_Fuji_1995-2-7.jpg/1024px-Mount_Fuji_from_Hotel_Mt_Fuji_1995-2-7.jpg" width="420" height="258" alt="冠雪した富士山を山中湖から眺める"> ＿＿＿＿<div class="figcaption"> ＿＿＿＿＿<p>山中湖湖畔から見た富士山の雄姿</p> ＿＿＿＿</div> ＿＿＿</div> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿＿<ul> ＿＿＿＿<li>HTMLには文書構造しか書かれていないためHTMLのメンテナンスも容易で、HTMLに手を加えることなくデザインは自由に多彩に変更できる。</li> ＿＿＿＿<li>class名のheader,section,footer,figure,figcaptionはHTML5の新しい要素の使い道に合わせてあるため、そのままHTML5の要素に変更できます。 ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>&lt;div class="header"&gt;&lt;/div&gt;→&lt;header&gt;&lt;/header&gt;</li> ＿＿＿＿＿＿<li>&lt;div class="section"&gt;&lt;/div&gt;→&lt;section&gt;&lt;/section&gt;</li> ＿＿＿＿＿＿<li>・・・・・・・・・</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿＿ ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

display: block; を追加するとか。 img.line{ width: 700px; margin-left: auto; margin-right: auto; display: block; }

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSS　画像中央そろえ

    スタイルシートを利用して、以下のことを実現させたいのですができません。 解決方法を探しています。 ■症状 ページ全体は左寄せ ページの中身は画像単体だったり、表があったりします。 画像は中央寄せ、表も中央寄せ、表の中身（テキスト）は左寄せにしたいのですが 以下の環境下でページ中身が左寄せになってしまいます。 　⇒Mac：IE ■CSSソース #box{　←ページ全体 width:760px; margin: 0px; text-align:center; } .box-center {　←ページ中身 text-align:center; margin:0px auto; padding:0; } .box-red {　←ページ中身の表（外枠） background-color:#FF0000; padding:5px; margin:0px auto 20px auto; } .box-yellow {　←ページ中身の表（内側） background-color:#FFF299; line-height:150%; text-align:left; } ■HTMLソース（抜粋） <div id="box"> 　<div class="box-center"> 　　<img src="～"> 　　<div class="box-red"> 　　　<div class="box-yellow">～</div> 　　</div> 　</div> </div> お分かりになる方、いらっしゃいませんでしょうか？ よろしくお願いします。

  • css firefox IE 画像を中央揃えにしたいです

    初心者です。よろしくお願い致します。 cssでホームページを作っています。 index.htmlに画像を中央に貼り付けたいのですが、 firefoxでは中央揃えに、IEでは左側に表示されます。 下にタグを書くので、ご回答いただけましたら幸いです。 よろしくお願い致します。 -------------------------------------------------- <html> <head> <title>○○○</title> <link href="design/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <img src="img/tobira.jpg"> </div> </body> </html> -------------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#FFFFFF; } body a img{ border: none; align:center; } .contents{ width:800px; margin:0px auto; margin-top:100px; } h1{ color: #FFFFFF; }

    • ベストアンサー
    • HTML
  • CSSで画像を左右中央に配置させたい。

    CSSで画像を左右中央に配置させたい。 CSSとXHTMLでWebページをつくっていますが、左右550pxくらいの説明画像をつくりました。 コンテンツ左右は600pxくらいでして、この600pxのDIVボックスモデルの中に左右中央に配置させたいのですが、検索しても遠回りな方法ばかりしか見つからず困っております。 たった画像を中央に配置させるだけのことがそんなに難しいんでしょうか？ 検索してますと色々と複合技で達成するとか、モダンブラウザはこれを記述し、IE6にはこれを記述するとか、複雑なことしか見当たりません。 <div class="boxmodel600"> <p>文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。 </p> <img class="img-btmctr" src="../img/img01.gif" alt="" width="550" height="400" /> </div> CSSのほうは、以下です。ダメだったんでimg-btmctrのほうに「width: 600ppx;」と入れたんですがそれでもダメでした。 img.img-btmctr { vertical-align: bottom; padding: 10px 0 0 10px; margin-left: auto; margin-right: auto; width: 600ppx; } .boxmodel { display: block; width: 600px; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 30px; text-align: left; }

    • ベストアンサー
    • HTML
  • CSSで表示が、、、

    写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }

    • ベストアンサー
    • CSS
  • HTML、ＣＳＳ が、なかなかうまくいきません。

    お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。

    • 締切済み
    • CSS
  • 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; } -------------------------------------

  • 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を

    背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" />&nbsp;<img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －

    • ベストアンサー
    • HTML
  • cssで画像を中央に寄せる方法について

    よろしくお願いします。一部の画像を中央に寄せたいのですが方法が分かりません。現在の内容は以下のような感じです。 【html】 <p class="font"> スタイルシート <span class="color2">レッスンブック</span> パソコン <img src="img/hoge.gif" alt="テスト" width="250" height="130" /> インターネット プリンター </p> 【css】 .font2{ text-align: left; width: 750px; padding: 20px; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 2px solid #191970; margin-left: 0; margin-right: 10; background-color: #ffff00; font-weight: bolder; } imgのみ中央に寄せたいのですがご指導をお願い致します。 良く分からなかったのですが以下のような記述をしてみたのですが 中央に寄りませんでした。 <img src="img/hoge.gif" class="aaa" alt="テスト" width="250" height="130" /> cssに .aaa{ text-align: center; } また、同スタイルにborderとpadding、widthとpaddingを使用するのは 有効な方法では無いのでしょうか？ 前回のご質問で他の方にご指導頂いたのですが誤って締め切ってしまいました。 どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSにてfloat:leftを使用して画像を3つ並べたのですが。。

    CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }

  • <img>タグにCSSのclass設定可能？

    <img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する