私は本当にページのどこかに画像を配置する必要があります(たとえば、左側から100ピクセル)が、left:100pxを使用する場合、画像の中心がどこにあるかを制御したいと思います。、画像は中央からではなく、左端から100pxの位置に配置されます。
左/右の端ではなく、画像の中心を選択する方法はありますか?
私は本当にページのどこかに画像を配置する必要があります(たとえば、左側から100ピクセル)が、left:100pxを使用する場合、画像の中心がどこにあるかを制御したいと思います。、画像は中央からではなく、左端から100pxの位置に配置されます。
左/右の端ではなく、画像の中心を選択する方法はありますか?
アイテムは常に左上隅から配置されるわけではありません。画像の幅がわかっている場合は、これを簡単に説明できるはずです。
画像サイズが動的である場合は、Javascriptを使用してこのタイプのポジショニングを行うのが最適な場合があります。
[画像の幅は事前にわからないと思います。そうでなければ、解決策は明らかです]
固定幅の要素に入れて、その中央に配置するのが最善の方法だと思います。もちろん、画像の幅が無制限で、コンテナ要素の幅を超える可能性がある場合、これには明らかな欠点があります。
画像の幅を知っていますか、それとも変化しますか?
幅がわかっている場合は、位置を設定してからマージンを戻すことができます。たとえば、ページの中央に配置する場合は、次のように使用できます。
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
画像が100x50pxの場合。
これがアプローチです。画像を でラップし、div
必要な場所に div を配置し、左にフロートさせて、コンテンツに合わせて折りたたむようにします。それからmargin-left: -50%
画像自体...
<div style="position: relative; left: 300px; border: 1px solid red; float: left">
<img src="#" style="position: relative; margin-left: -50%"/>
</div>