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 など、何にでも変更できます。ただし、画像の幅は 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一部の古いブラウザで が定義されるように、スクリプト タグを head に配置する必要があります。外部 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 に答える