0

我希望带边框的部分以所有屏幕分辨率为中心。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;
    }
4

2 回答 2

1

尝试：

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

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

也许你想要这样的东西：

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/。

于 2013-07-12T01:34:03.213 回答
0

我知道它居中，但我希望通过将整个页面居中来使顶部等于底部。不仅仅是左右 – HeyItsProdigy

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

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

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

于 2013-07-12T02:05:39.340 回答