画像の相対位置表示（センタリング）

質問

ウインドウの横幅が変化しても、画像が常にウインドウの中央から一定の距離（たとえば画像の左端が中央から右に100px）に表示されるようにする方法を教えてください。

よろしくお願いします。

回答No.2

amyo · ベストアンサー

IE7は環境が無いので試していませんが・・・

画像だけなら
<style>
<!--
.box {
position:relative;
left:50%;
}
.image {
position:relative;
right:-100px;
}
-->
</style>
<div class="box">
<img src="画像URL" width="100" height="100" class="image">
</div>

前後に文字も入れるなら
<style>
<!--
.box1 {
position:relative;
left:50%;
}
.box2 {
border:1px solid #ff0000; /*わかりやすく枠線表示*/
position:relative;
right:-100px;
display:inline-block;
*display:inline;
*zoom:1;
}
-->
</style>

<div class="box1">
<div class="box2">文字をいれるなら<br /><img src="画像URL" width="100" height="100"><br />こんな感じで</div>
</div>

お礼

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

思い通りの表示を行うことができました。

回答No.1

ORUKA1951

50%とpxを差し引きする計算処理はスタイルシートには用意されていません。
したがって直接画像の位置を指定する方法はありません。
　そのため、一旦ウィンドウ幅の50%で何らかのブロックをおき、それを基準にmarginなりpadding、あるいはposition:relative/absoluteで指定していくかになります。
　その画像がHTML上でどのようなマークアップがされているか分かりませんので具体的な方法は示せませんが、たとえば・・
　本文をページの右に記述してあり、その挿絵を本文から右に100px離すのでしたら、
[HTML5]
<section>
　<h2>見出し</h2>
　<p>記事</p>
　<figure>
　　<img src="" width="" height="" alt="">
　</figure>
</section>
でしたら
section{width:50%;position:relative;}
section figure{position:absolute;left:100%;padding-left:100px;}
になります。

[HTML4.01]だと
<div class="section">
　<h2>見出し</h2>
　<p>記事</p>
　<div class="figure">
　　<img src="" width="" height="" alt="">
　</div>
</div>

div.section{width:50%;position:relative;}
div.section div.figure{position:absolute;left:100%;padding-left:100px;}

お礼

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

大変参考になりました。