Question

我希望带边框的部分以所有屏幕重新定位为中心。这可能是margin-top和margin-bottom属性吗？

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>

<body>

<div id="container">
<div id="body">
<img src="2.png" width="1000" height="100" />
<center>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Services</a></li><li><a href="biography.html">Biography</a></li>
    </ul>
</center>
</div>    
</div>
</body>
</html>

CSS：

@charset“utf-8”;

html {
    text-align: center
}

#container {
    margin-left:auto;
    margin-right:auto;
    margin-top:50 auto;
    margin-bottom:50 auto;
    width:960px;
    background-color:#666666;
}

    #body {
        background-color:#666666;
        width:1000px;
        height:1000px;
        border:3px solid #FFFFFF;
        margin-top:50px auto;
    }

    .navbar {
        margin:0px;
        background-color:#66FF33;
        text-align:center;
        list-style:none;
        border-bottom:none;
        padding-left:0px;    
    }


    ul.navbar li {
        width:20%;
        display:inline-block;
    }

    ul.navbar a {
        display:block;
        width:100%;
        margin:0px;
        padding:10px 0px;
        text-decoration:none;
    }

    ul.navbar a:hover {
        background-color:#33FFD7;
    }

    body {
        background-color:#333333;
    }

Answer 1

尝试：

#container{
  width:960px;
  margin:0 auto;
  /*more CSS*/
}

您可以将0更改为任何内容，例如50px。您的图像宽度大于960px。

也许你想要这样的东西：

var pre = onload; // window is implicit
onload = function(){ // I personally don't indent directly inside the onload
if(pre)pre(); // execute old window.onload if it existed
var doc = document, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function E(e){
  return doc.getElementById(e);
}
function alignTop(id){
  var e = E(id), w, h;
  if(IE){
    h = parseInt(e.currentStyle.height);
  }
  else{
    h = parseInt(getComputedStyle(e).getPropertyValue('height'));
  }
  w = innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
  e.style.marginTop = w/2-h/2+'px';
}
alignTop('container');
}

您应该将脚本标记放在头部，以便在一些较旧的浏览器中定义body。我会使用外部JavaScript，因此它被缓存，如：

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <title>Your Title Here</title>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='keywords' content='some words to help SEO here' />
    <style type='text/css'>
      @import 'common.css'; @import 'thisPage.css';
    </style>
    <script type='text/javascript' scr='someName.js'></script>
  </head>
<body>
  <div>
    <div id='container'>Example Only</div>
  </div>
</body>
</html>

要查看工作模式，请访问http://jsfiddle.net/MeMQz/2/。

Answer 2

我知道它以中心为中心，但我希望顶部与整个页面居中等于底部。不只是左右 - HeyItsProdigy

根据您上面的评论，我猜您试图根据浏览器的高度使内容的高度100％相等。你可以使用这个技巧：

html, body{
   height: 100%;
}
#container{
    display: block;
    height: 100%;
}

在这里查看结果http://jsfiddle.net/qiqiabaziz/GB4W2/1/

如何集中我的整个网页，包括背景

2 个答案: