logo标签列表

如何将页面内容设置为浏览器中心？

htmlcss
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;
}
5个回答
7
将所有内容放入一个div中，将其class设置为container:
<div class="container">
   ...
</div>

然后使用CSS将其边距设置为auto：
.container{
    margin:0px auto;
    width: 600px; 
}

请看这个 jsfiddle。 编辑 请查看这个新的 fiddle，menu 的 CSS 不需要你写的那么多，应该像这样：
#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8; 
}
1
将您的所有页面内容放入一个包装器 div 中，然后给它一些相对宽度（例如 50%）和自动水平边距。
<div id="wrapper">
   <!-- CONTENT GOES HERE -->
</div>

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

#wrapper {
    width: 50%;
    margin: 0 auto;
}
0
将另一个 div 包裹在您的所有内容周围（从 body 开始标记右侧直到 body 结束标记前）。将其命名为 <div class="container">。
将以下样式设置为该 div：
width: 1000px;
margin: auto;

这将使您的内容居中。

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

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>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接