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

締切済

質問者：hmrusoyz
質問日時：2014/10/25 12:18
回答数：4件

http://wayohoo.com/programming/css/how-to-center …
を参考にしたのですが、
「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;

の部分の何が間違ってるのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： DrFell
回答日時：2014/10/26 07:59

参考のページの

■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

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2014/10/25 15:38

すみません。

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">

＿</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><div class="header"></div>→<header></header></li>
＿＿＿＿＿＿<li><div class="section"></div>→<section></section></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>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2014/10/25 15:35

とても酷いサイトを参考にされているようですね。

★そもそもデザインのために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-html4 … )』を理解できていない。

　まず、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">

＿</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/ … 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/th … 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><div class="header"></div>→<header></header></li>
＿＿＿＿＿＿<li><div class="section"></div>→<section></section></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>