Question

简单的问题。我希望我的页面位于中间，从顶部和左侧。

请指出我需要添加的内容以及在哪里，谢谢。如果您在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>

再次，谢谢。

Answer 1

我的代码没有太大问题。您的内容包装器的基本框似乎正确居中。定义垂直中心取决于高度。如果您为页面指定高度=自动，则无法将其居中，因为未定义父高度。（反正不是没有JQuery）

我为你的包装器添加了一个最小高度，以显示你有一个居中的基本框。如果要垂直居中文本。将其包含在div中或使用<br>分隔段落，然后为其指定特定的上下边距。 *取消隐藏我注释掉的css行

HERE'S YOUR CODE

页面中间页面，从顶部到左侧

1 个答案: