3

800x700pxの画像を含む単純な構造下ページを表示する必要があります。この画像をページの中央に垂直方向と水平方向の両方に表示したいのですが、

別のアプローチを試しましたが、うまくいきませんでした。以下のサンプルHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

html, body { height: 100%; width: 100%; }
body { position: relative;  background-image:url('images/bg.jpg');background-repeat:repeat; }
#mydiv { 
    position: absolute;
    height: 100%;
    width: 100%;
    text-align:ceter;
}
</style>
</head>
<body>
</body>
</html>
4

3 に答える 3

13

このCSSは、長さに関係なく画像を中央に配置できます。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

秘密はにありtransformます。これがないと、画像全体を美しく表示するのではなく、画像の左上のピクセルを中央に配置するだけです。

于 2016-05-17T23:42:15.013 に答える
6

Check this article out by Chris Coyier on CSS-Tricks. I think it might help out. I ran into the same problem a few days ago and his answer worked for me.

Centering an image horizontally and vertically

Basically the idea is, if your image has a set width and height. You can absolute position it from the left and top 50% and then do negative margins equal to half of the width and height to bring it back dead center. They're are other ways to vertically center an image if it doesn't have set dimensions.

于 2013-02-05T06:45:48.340 に答える
1

divのIDが設定されていませんでした。編集しました。これが完了すると、画像が水平方向に配置されます。また、mydivを「絶対」に配置する必要はありません。

画像を垂直方向に揃えるには、javascriptを使用せずに、imgに％を使用してマージントップを指定するのが最善の解決策です。

#mydiv {
 text-align: center;
}

#mydiv img {
 margin-top: 15%;
}
于 2013-02-05T06:41:46.327 に答える