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を使用するのは
有効な方法では無いのでしょうか？
前回のご質問で他の方にご指導頂いたのですが誤って締め切ってしまいました。
どうぞよろしくお願い致します。

回答No.6

xs200 · ベストアンサー

<p>～</p>で囲まれているものがひとつながりになってますよね。
この中で画像だけを中心にしたいのなら画像をbackgroundにすればいいです。positionでもできますがbackgroundで回答します。
htmlではclassがfontでcssではfont2になっていますが、これは間違いだとしてcssを修正すると、
.font {
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: 0;
background-color: #ffff00;
font-weight: bolder;
display: block;
background: url(img/hoge.gif) center center no-repeat; height: 130px;
background-color: #ffff00;
}

お礼

xs200様
この度は、ご指導頂きましてありがとう御座いました。何度もお手数をおかけいたしました。
ありがとう御座いました。

回答No.5

xs200

#1への回答の補足でわからないのが、そのhtmlだと

スタイルシート レッスンブック パソコン　画像 インターネットプリンター

と一列になります。その中の画像だけを中央にするんですよね。
そうすると他の文字はどうするのですか? 画像に重なるかもしれないし、画像の左に文字が全部行ってしまうかも知れないし、それでもいいなら。

【html】
<p class="font">
スタイルシート
<span class="color2">レッスンブック</span>
パソコン
インターネット
プリンター
</p>

【css】
p.font {display: block; background: url(img/hoge.gif) top center no-repeat; height: 130px; }

です。はっきりいって質問の内容が不明です。

補足

xs200様。すいませんでした。そして回答ありがとう御座いました。
私のほうで質問の趣旨を間違えてしまいました。ごめんなさい。すいません。もしよろしければ再度ご回答いただけませんでしょうか？
htmlとcssの記述は以下のとうりで御座います。
画像を中央寄せしようとtext-align: center;を追加したところ画像は中央に寄りましたが、文字まで中央に寄ってしまいました。
私は、文字は左寄せ、画像のみを中央寄せにしたく、以下の部分にclass属性を新たに追加して、text-align: center;を記述すればよいのかと思ったのですがclassの書き方を間違えたのか、中央に寄りませんでした。よろしければ再度ご指導頂けませんでしょうか・・・
本当にこの度は私の勘違いでお手数をおかけいたしました。
どうも、すいませんでした。

【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: 0;
background-color: #ffff00;
font-weight: bolder;
}

回答No.4

noname#100277

imgに対して中央表示のCSSを適応。
{
margin-left:auto;margin-right:auto;
text-align: center;
}

回答No.3

yyr446

前の質問の続きですね。
こうでしょう
<div class="font">
<p>スタイルシート</p>
<p class="color2" style="text-align:center;">レッスンブック</p>
<p>パソコン</p>
<p style="text-align:center;"><img src="img/hoge.gif" alt="テスト" width="250" height="130" /></p>
<p>インターネット</p>
<p>プリンター</p>
</div>

回答No.2

TERIMAYO

<div class="aaa"><img src="img/hoge.gif" alt="テスト" width="250" height="130" /></div>

と書いてしまったほうが早いと思います。

> borderとpadding、widthとpadding
これは、ブラウザによって解釈が違ってくるので、
微妙なずれが生じるんです。
特にwidthとpaddingに関しては、
width分にpadding分を含めるか含めないか、
といった大きな違いがあるので、かなりズレます。

回答No.1

yambejp

＞imgのみ中央に寄せたい

意味がわからないのですが、ひとつながりの表示なのに
画像だけセンタリングされたらほかの文字はどうなることを
想定しての質問でしょうか？

補足

ご連絡ありがとう御座います。
はい。おっしゃるとおり一つのつながりの表示です。
背景については、黄色にして、その中に文字から画像を全てを入れてあります。文字については左に寄っていますが、その中の画像のみ中央に寄せたいと考えております。
皆様に色々とご指導頂いているのですが、実行してみると黄色い枠の中から画像を出てきてしまいます。
ご指導の程よろしくお願いします。