ブラウザのサイズが変更された場合でも、画像をページの垂直方向と水平方向の両方の中央に配置したいと思います。
現在、私はこのCSSを使用しています：
.centeredImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}
そして、このHTML：
<img class="centeredImage" src="images/logo.png">
FF では中央に配置されますが、IE では中央に配置されません (画像の中央は左上隅に配置されます)。何か案は？
-ロボット
私はこのように解決しました：
img.class-name{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
これを使ってみてください:
position: absolute
普遍的なKISS（「シンプルで愚かに保つ」）の方法：
<p style="text-align: center;"> <img src="myImage.png" /></p>
これはトリッキーな方法ですが、うまくいきます：
CSS:
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
HTML:
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="my_cool_image.png" alt="hello world" /></td>
</tr>
</table>
</body>
</html>
IEにはposition: fixed（他の何百万ものものと一緒に）問題があるので、互換性が重要な場合はそれに対してアドバイスします。
position: absoluteコンテナをスクロールする必要がない場合に使用します。それ以外の場合は、スクロールするときに画像の上下を調整するためにいくつかのjsが必要になります。
text-align: center画像のコンテナに適用すると機能するはずですが、画像自体には機能しません。しかしもちろん、それは垂直ではなく、水平にのみ対処します。vertical-align: middle十分な大きさのコンテナを使用しても、私には機能しません。
少なくとも私がテストしたとき、自動マージンはIEでは機能しません。
解決：
.centeredImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: image-height/2;
margin-left: image-width/2;
}
あなたが言及したので：
margin-top: -50px;
margin-left: -150px;
中央に正しく配置されている場合、画像の高さは 50x2=100px になります。& 幅 150x2=300px;
提供された回答が機能しない、および/または各ブラウザーで一貫性がない場合は、これを試してみてください。
http://andreaslagerkvist.com/jquery/center/
text-align:center;
もらえるはずなのに。
やったよ！この方法は堅実で、すべての主要なブラウザーで機能します。
style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"
画像の幅の半分の左を使用し、マージンを使用して横に並べただけです。御馳走になります:)
ウェブ上の単一の画像とレスポンシブ
背景画像:
/image.png
CSS:
html, body { height: 100%; margin: 0px; }
.bg-image {
width: 100%;
height: 100%;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-indent: -9999px;
}
HTML:
<body>
<div class="bg-image">Some text not displayed</div>
</body>
クリア: 両方; マージン: 自動;