4

我需要的是在浏览器的中心显示网页的内容，无论屏幕大小，大或小，分辨率高或低，它总是自动调整到浏览器的中心。提前致谢

我的 Html 和 css 代码如下

HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="basic1.css"/>
    </head>
<body>

    <div id="menu">
        <a href = "#"><img class="imgc" src="img.png" alt="icon"/></a>
        <a href = "#"><img class="imgd" src="do.png" alt="do"/></a>
    </div>
        <div id="smenu"></div>
    <div id="mainbox">
        <div class="ibox"></div>
    </div>
    <div id="menutext">
    <ul>
        <li><a href="#"><b>???????</b></a></li>
            <li><a href="#"><b>?????</b></a></li>
        <li><a href="#"><b>?????</b></a></li>
        </ul>
    </div>
    <div id="py">
        <pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
        <pre class="s">?? ???? ??? ??? <span style="color:#980000;
        letter-spacing :+1mm"><b>:3</b></span></pre>
    </div>

    </body>
    </html>

CSS

#menu img.imgc {
position:absolute;
right:77%;
top:10px;
margin:0px auto;
}
#menu img.imgd {
position:absolute;
left:75%;
top:10px;
margin:0px auto;
}
#menu {
position:absolute;
left:0%;
top:0%;
right:0%;
right:0%;
width:100%;
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8; 
}
#mainbox div.ibox{
position:absolute;
left:31%;
top:20px;
border-left:3px solid gray;
height:105px; 
margin:0px auto;
}
#menutext ul{
position:absolute;
right:72%;
top:15px;
list-style: none;
line-height:30px;
margin:0px auto;
}
#menutext a{
font-size:12px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500; 
color:black;
text-decoration: none;
text-align: left;
}
#py pre.p{
position:absolute;
top:15px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +2mm;
font-size:50px;  
color:#009933;
text-decoration: none;
text-align: center;
margin:0px auto;
}
#py pre.s{
position:absolute;
top:67px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +3mm;
font-size:12px;  
color:gray;
text-decoration: none;
text-align: center;
margin:0px auto;
}
4

5 回答 5

7

将所有内容放在一个 div 中，将其类设置为container：

<div class="container">
   ...
</div>

然后使用 css 将其边距设置为自动：

.container{
    margin:0px auto;
    width: 600px; 
}

看看这个jsfiddle

编辑

检查这个新的小提琴，menucss不需要你写的所有东西，应该是这样的：

#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8; 
}
于 2012-12-25T07:59:19.530 回答
1

将所有页面内容放在一个包装器 div 中，然后给它一些相对宽度（例如 50%）和自动水平边距。

<div id="wrapper">
   <!-- CONTENT GOES HERE -->
</div>

CSS（50% 页面宽度，零上/下边距）：

#wrapper {
    width: 50%;
    margin: 0 auto;
}
于 2012-12-25T07:55:45.553 回答
0

在您的所有内容周围放置另一个 div（因此从您的正文开始标记之后和正文结束标记之前）。称它为<div class="container">

将以下样式设置为该 div：

width: 1000px;
margin: auto;

这应该使您的内容居中。

您可以根据需要更改宽度。

于 2012-12-25T07:55:33.127 回答
0

你可以使用fundation3的网格：http: //foundation.zurb.com/docs/grid.php

于 2012-12-25T08:09:33.007 回答
0

工作解决方案。 

<html>
          <head>
            <style type="text/css">
                html
                {
                    width: 100%;
                    height: 100%;
                }

                body
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            </style>
        </head>

        <body>
            This is text!
        </body>
</html>
于 2014-10-22T12:11:10.740 回答