web-dev-qa-db-ja.com

CSSを介してWebページの中央に画像を配置する必要があります

ブラウザのサイズを変更しても、画像をページの中央に垂直方向と水平方向の両方に配置したいのですが。

現在、私はこのCSSを使用しています。

.centeredImage {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -150px;
}

そしてこのHTML：

<img class="centeredImage" src="images/logo.png">

FFを中心にしていますが、IE（画像の中心は左上隅に配置されています）ではありません。何かアイデアはありますか？

-ロボット

cssimagecenter
10
Robot

これを使ってみてください：

position: absolute
7
medium

私はそれをこのように解決しました：

img.class-name{

    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;  
}
18
Babul Mirdha

これはトリッキーな方法ですが、機能します。

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>
2
JuanZe

普遍的なKISS（ "シンプルで愚かにしてください"）方法：

<p style="text-align: center;"> <img src="myImage.png" /></p>
1
berhauz

非常にシンプルなクロスブラウザの自動サイズ変更方法があります。幅200pxの画像を撮影します。幅の半分を取り、次の手順を実行します。

   #imgcent1 {
   left: calc (100% - 100px  /  2 );
   /*rest of code*/
   }

負の数と正の数を避けるために「空白」があることを確認してください（すべてのオペランドにこの規則を使用するのが最適です）。自動サイズ変更されます。試してみてください。うまくいけば、他のブラウザでテストすることで、意図したとおりに標準になることが保証されます。

0
hograham
text-align:center;

vertical-align:middle;

vertical-align

トリックする必要があります

0
Michael B.

明確：両方;マージン：自動;

0
TheDudeAbides

解決：

 .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;

0
Rahul dagli

提供された回答が機能しない、および/または各ブラウザで一貫性がない場合は、これを試してみてください。

http://andreaslagerkvist.com/jquery/center/

text-align:center;

しかし、それを取得する必要があります。

0
Kevin

IEにはposition: fixed（および他の100万もの）に関する問題があるため、互換性が重要な場合は、これに反対することをお勧めします。

コンテナをスクロールする必要がない場合は、position: absoluteを使用します。それ以外の場合は、スクロールするときに画像の上部と左側を調整するためにいくつかのjsが必要になります。

text-align: centerは、画像のコンテナに適用された場合は機能しますが、画像自体には機能しません。しかしもちろん、それは垂直ではなく水平にのみ対処します。 vertical-align: middleは、十分な大きさのコンテナを使用しても機能しません。

少なくとも私がテストしたとき、自動マージンはIEでは機能しません。

0
Tesserex

やったよ！この方法は堅実で、すべての主要なブラウザで機能します。

style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"

画像の幅の半分の左側を使用し、マージンを使用して画像をシャントしました。御馳走を動作します:)

0
mattfrombox

ウェブ上の単一の画像とレスポンシブ

背景画像：

/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>
0
Maidiries
.image {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
 }
0
user3668989