简单的问题。我希望我的页面位于中间，从上到下。它已经从左到右居中。
请指出我需要添加的内容和位置，谢谢。如果您在 css 中看到一些错误，请也更正它。
@charset "utf-8";
/* CSS Document */
/* Created By CaptainMcMarcus */
/* Heavily customized by Sjokomelk */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
html {
height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;
}
/* Clearing some default browser settings */
* {border: 0px; margin: 0px; padding: 0px;}
a:active {outline:none;}
:focus {-moz-outline-style:none;}
.clear {clear:both;}
/* These parts can be easily changed to affect the design */
body {color: #FFF; font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: url('images/bg.jpg') no-repeat; background-size: 100% auto; background-size: cover; background-attachment: fixed;}
p {text-align: justify; font-size:16px;}
p a { text-decoration: underline; color: #ea5353; text-decoration: underline;}
p a:hover { text-decoration: none; color: #333;}
/* Core Wrapper which we vertically align */
.wrapper {width: 700px; height: auto; margin: 0 auto;}
.box-wrap {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap h2 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.box-wrap p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; padding: 15px 30px; overflow: hidden;
text-align: justify; width: 640px; height: auto; background: #ffffff; color: #717171;}
.icon-box {width: 210px; height: 210px; background: #FFF; margin: 20px 15px 20px 0; float: left; text-decoration: none;}
.icon-box a {text-decoration: none;}
.icon-box p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; text-align: center; color: #717171; text-decoration: none;}
.icon-box:hover {background: #f1f1f1;}
.wide {width: 700px; margin: 0px;}
.end2 {margin: 0px 0px 0px 0px;}
.end {margin: 20px 0px 0px 0px;}
nav {margin: 10px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 105px;
margin: 0px 14px 0 0;
}
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}
nav ul li:last-child a{
margin-right:0;
}
nav ul li ul.submenu {
position: absolute;
width: auto;
display:none;
top: 35px;
}
nav ul > li:hover > ul {
left: 0;
display: block;
}
code, pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 10px;
color: #333333;
}
code {
padding: 3px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
pre {
display: block;
padding: 8.5px;
margin: 0px;
font-size: 11px;
line-height: 18px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
}
pre code {
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
}
.footer h3 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.footer {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Forside" />
<title>Hjortefjellet</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script><!-- Link to jquery so we can center the content -->
</head>
<body>
<div class="wrapper"><!-- Opens the wrapper so we can contain and center everything -->
<img src="images/logo.png" width="702" height="87" alt="Your Logo" />
<nav>
<ul>
<li><a href="index.html">HJEM</a></li>
<li><a href="forum">FORUM</a></li>
<li><a href="doner.html">DONER</a></li>
<li><a href="servere.html">SERVERE</a>
<li><a href="faq.html">FAQ</a></li>
<li><a style="margin-right: 0 !important;" href="kontakt.html">KONTAKT</a></li>
</ul>
</nav>
<div class="clear"></div>
<div class="box-wrap">
<h2>Velkommen til Hjortefjellet</h2>
<p class="text-box"><!-- PAGE TEXT -->
Hjortefjellet er et nytt norsk gaming coummunity som har brukeroplevelsen i fokus. Vi startet opp 21. februar og har nå en Garry's Mod som kjører Trouble in Terrorist Town. Ta gjerne turen innom for å bli bedre kjent med oss.</p>
<p class="text-box">Has albucius oporteat eu, eos eu etiam intellegam. Has posse dicant feugiat ut, cu quo case convenire definitionem, possim persius meliore no est. Urbanitas vituperatoribus eos in, pro delenit reformidans eu. Nec detracto sadipscing te.</p>
</div>
<div class="footer">
<h3>© Hjortefjellet.com 2014 | Siden benytter cookies</h3>
</div>
</div><!-- This closes the wrapper -->
</body><!-- Closes off the HTML Document -->
</html>
谢谢。
最佳答案
像这样
$(function() {
$(window).on('resize', function() {
$('.wrapper').css('margin-top', function() {
return ($(document).height() - $(this).height()) / 2;
});
}).trigger('resize');
});
关于javascript - 从上到下在页面中间居中网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22893004/