gpt4 book ai didi

html - 如何将页面内容设置为浏览器居中?

转载 作者:技术小花猫 更新时间:2023-10-29 12:03:13 25 4
gpt4 key购买 nike

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

我的 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;
}

最佳答案

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

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

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

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

看看at this jsfiddle

编辑

检查 this new fiddle , menu css 并不需要你写的所有内容,应该是这样的:

#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}

关于html - 如何将页面内容设置为浏览器居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14028749/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com