个人中心
gpt4 book ai didi

javascript - 从上到下在页面中间居中网站

转载 作者：太空宇宙 更新时间：2023-11-04 03:55:20 25 4
gpt4 key购买 nike

简单的问题。我希望我的页面位于中间，从上到下。它已经从左到右居中。

请指出我需要添加的内容和位置，谢谢。如果您在 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');
});

FIDDLE

关于javascript - 从上到下在页面中间居中网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22893004/

25 4 0
文章推荐： css - 让媒体查询覆盖 "regular"css
文章推荐： python - 确定第一组 CFG
文章推荐： python - python动态条形图生成错误
文章推荐： python - render_template 无法 jsonify 对象
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com