イメージをセンタリングさせてかつ改行させない

質問

イメージをセンタリングさせるために <img ...> を <div> で囲んで <div> に対して「text-align: center; 」か「display: block; margin-left: auto; margin-right: auto;」を指定すると中央に表示されますが、前後に改行がはいってしまいます。

　イメージの前後で改行させないように「display: inline-block; _display: inline;」を指定すると今度は端によってしまいます。

　中央に表示してかつ前後に改行をいれないような指定方法はあるのでしょうか？

回答No.2

t_ohta · ベストアンサー

＞　<div> の前と </div> の後ろに発生する改行をなくしつつ イメージを中央に置きたいのです。

div はブロックレベル要素なので必ず改行が入ります。
改行が入らないのはインライン要素だけです。

もしかして、おっしゃっているのはマージンなのではないでしょうか。
img や該当する div のマージンをゼロにすると隙間は消えると思います。
マージンを消すと img の上下の要素との隙間は無くなると思います。

お礼

なるほど。マージンのことではないのですが、ブロックレベル要素となので必ず改行が入るということは理解できました。

　ありがとうございます。

回答No.3

noname#242220

レイヤーつまり<div style="position:absoiue;left X; top;Y">画像</div>
として作成しました。
＊X、Yは表示位置。

お礼

なるほど、そういう手もありますね。

　ありがとうございます。

回答No.1

t_ohta

画像を中央に表示した上で、画像の左右に文字を配置したいと言う事でしょうか？

それであれば、3カラムレイアウトで検索するとHTMLやCSSの記載例が出てくると思います。

お礼

回答ありがとうございます。

　ごめんなさい。そういうことではないんです。

　段組みではなく、単にイメージを中央に配置して前後を改行させたくないということなんです。

　<div> の前と </div> の後ろに発生する改行をなくしつつ イメージを中央に置きたいのです。

　うまく伝わっていなかったらすみません。