0

現在、単純なサイトに取り組んでいますが、さまざまなブラウザーのサイズに適応する画面の中央に div を配置する必要があります。

私はほとんどそれを機能させましたが、どこが間違っているのかを誰かに教えてもらうことはできませんでした。
ライブ サイトは http://adamnicolaou.com/です。

助けてくれてありがとう

ここに私のCSSがあります：

/* DEFAULTS
-------------------------------------------------------------------------------*/
* { font-family:FuturaFont; color:#F1F2F2; background-color:#333133; }
/* FONT - TEXT
-------------------------------------------------------------------------------*/
@font-face { font-family:FuturaFont; src: url('../font/FuturaLT_Light.ttf'),                  url('../font/FuturaLT_Light.eot'); /* IE9 */ }
* { font-family:FuturaFont, helvetica; color:#F1F2F2; background-color:#333133; letter-spacing:2px;}
h5 { font-size:25px; text-transform:uppercase; text-align:center; margin-top:5px; }
h1 { font-size:20px; text-transform:uppercase; }
p { font-size: 18px; letter-spacing:3px; text-transform:uppercase; }
h4 { font-size:18px; text-transform:uppercase; line-height:25px;}
footer small { font-size: 12px; text-transform:none; text-align: center;  }

/* LAYOUT
-------------------------------------------------------------------------------*/
html, body, #container { height:97.5%; margin: 0; padding: 0; padding-bottom:-8%;}
body { min-width:1164px; min-height:720px;}
#container { height: auto; min-height: 98%; margin:auto 0; margin-left:auto; margin-right:auto; position:relative; }
#content { padding-bottom: 10px; margin-left:135px;  margin-top:60px; width:900px; position:relative; margin-left:auto; margin-right:auto; }
footer {   font-size:15px; text-align:center; height:20px; position:relative; }
#enter { vertical-align:middle; position:relative; margin-top:5%; padding:0; }
header { padding-left:10px; padding-right:10px; background-color:transparent; }
aside { margin-left:520px; position:relative; margin-top:-530px;}

/* LINKS - NAVIGATION - HEADER
-------------------------------------------------------------------------------*/
a { text-decoration:none; border:0px; padding:0; }
a:hover { text-decoration:underline; }
#nav ul { list-style:none; text-align:right; text-transform:uppercase; padding-right:10px; line-height:32px; position:relative; margin-top:-130px; font-size:20px;  }
#logo { padding:10px;  position:relative; z-index:10;}
.navtext { margin-top:-62px; margin-left:160px; z-index:10; position:relative; background-color:transparent; width:800px; }
body#home ul li .home, body#design ul li .design, body#photography ul li .photography,      body#contact ul li .contact { text-decoration:underline; }
#content a .imglink:hover { border:3px; border-style:solid; color:#626162; }

/* PORTFOLIO IMAGES
-------------------------------------------------------------------------------*/
#content .img { padding:10px; position:relative; }

フロントページのHTMLコードは次のとおりです。

<body id="index">
    <div id="container">
        <header>
            <div id="nav">
            </div> <!--- END OF NAV DIV --->
        </header>
        <div id="enter">
            <center><img src="images/enter_logo.png"><br></center><br><br>
            <a href="welcome"><h5>Enter</h5></a>
        </div>
    </div> <!--- END OF CONTAINER DIV --->
</body>
4

1 に答える 1

0

垂直方向のセンタリングを探している場合は、CSS ルールでこれを試してください。

#outer {
    position:static;
}
#middle {
    position:absolute;
    top:50%;
}
#inner {
    position:absolute;
    top:-50%;
}

このフィドルで確認できます

ウィンドウのサイズを変更して、それがどのように見えるかを確認してください

于 2012-04-22T20:14:12.743 に答える