解決済

clip!clip!
Ads By Google

画像の中央揃えが出来ません。



こちらのブログなのですが、
ご覧のようにインフォトップの
売り上げ画像が右にずれています。


<center><img src=" ; width="618" height="83" border="0" alt="2008y10m07d_161916765" hspace="5" class="pict" /><br /></center>


このように中央揃えのタグで挟んでみたのですが、
直りません。

綺麗に中央に収まる方法を教えてください。

よろしくお願い致します。

2008-10-07 16:46の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2008-10-08 01:56:27ベスト
中央揃いができないんではなくて、画像横幅が大きすぎて、
記事投稿部分の中央に収める事ができないというのが、
原因のようです。

現在の、画像むかって左端の部分が限界点です。
<center> タグにしたがって中央に寄ろうとしているんですが、
画像の中心部分がセンターにくる前に、左端に限界点が
きてしまい、中央に寄れずに画像はストップ。

・・・ って感じでしょうか。だから右に寄っているように感じて
しまうんですが、あの状態で画像はセンターの限界まで頑張って
寄ってくれています。右サイドカラムに引っ付いてしまっている
のも、画像横幅が大きすぎるからです。

■ 解決策としては、今の画像の大きさのまま、強制的に左に寄せたい
のであれば <margin> を使ってマイナス指定をする方法がありますが
左サイドカラムが下に落ちるような事があれば、やめて下さい。

以下のタグで、画像を設置して下さい。マージンの数値は
だいたい計算しておきました。( カンですけど ww )

<div style="margin-left:-17" align="center">
<img src="http://image.blog.livedoor.jp/ritto11/imgs/8/8/883b16c7.jpg" border="0" alt="2008y10m07d_161916765" hspace="5" width="618" height="82"/>
</div><br/>

質問に書かれているタグは、<br/> の位置がおかしいです。
</center> の外側に。回答の中では、</div> の外側に記入しています。
class="pict" は、センター揃いの場合はいらないでしょう。
外しておきました。

■ もうひとつの解決策は、画像を小さくする事。
サイズ指定してもいいですが、width="590" height="78" ぐらいで
設定すると、中に書かれている文字が潰れます。
画像作成ソフトで、キレイに作り直したほうが良いと思います。

上記の方法で、お試しください。
回答レベル : 回答

教えていただいた方法で
試してみましたが、自分のイメージ通りに
行かなかったので、この画像は載せないことにしました。

しかし、とても親切で丁寧な回答を
下さって、とても嬉しかったです。

本当にありがとうございました。

とても参考になりました。

Ads By Google

コメント(3)

#1.  HS
2008-10-07 17:17:02

「累計売上」ってヤツですよね(?_?)
IE7 と FireFox では真中に表示されてますが?

2008-10-07 17:35:23

当方、Firefox3。
累計売上画像の上に他の画像が重なってます。
むしろ、右側の画像を下げるのでしょうね。
左側画像と累計売上画像の間も離れすぎているようです。

#3.  AQ
2008-10-08 08:38:24

> りこちゃんさん
イメージどおりに、ならなかったんですか?
こちらで HTML を落として実際に検証してみて、良い感じに
なったんで回答したんですが、それは残念です。(>_<)

でも、ベストいただいて、ありがとうございます。(^^)

トラックバック(3)

トラックバックURL:

パディングとマージン

2006年03月18日 AQ 『 ボックスと要素 』 の関連記事となります。先に説明したボックスを構成するものの中に、今回説明するパディングとマージンがあります。CSS ( スタイルシート ) を覗いているとやたら出てくるので、もうみなさんお馴染みの記号ではないでしょうか ...

Pet Lovers Only♪ at 2008年10月08日 02:29:17