个人中心
gpt4 book ai didi

css - 在所有屏幕尺寸上居中网站

转载 作者：太空宇宙 更新时间：2023-11-04 14:36:09 24 4
gpt4 key购买 nike

我需要帮助使我的网页在小屏幕尺寸上居中。我的网站在 989 像素的正常宽度下看起来不错，但是当它变小时它被推到左边并且右边有很多空白区域。我一直在尝试很多方法来解决这个问题，但没有任何效果。

现在就看你们了。希望你能帮上忙。

    <!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>
<style media="screen" type="text/css">
*{
   margin:0;
   padding:0;
}

body{
   text-align:center; /*For IE6 Shenanigans*/
   min-width:989px;
   margin:0;
   padding:0;

}

#header{background:url(/images/header.png) no-repeat;
border:;
padding:50px 0px 50px 0px;
text-indent:-9999px;
width:100%;
background-size:cover;

}
#menu{background:url(/images/nav-slice.png) repeat-x;
border:;
width:100%;
background-size:100%;
padding-bottom:20px;
padding-top:15px;
-moz-box-shadow: 0px 2px 2px 0px #888; 
-webkit-box-shadow: 0px 2px 2px 0px #888; 
box-shadow: 0px 2px 2px 0px #888; 
}

ul{padding:0;
margin:0;
overflow:hidden;
list-style-type:none;

}

li{

float:left;
display:inline-block;
padding-left:17%;/*70 divided by 800*/
padding-right:8%;
font-size:1em;

}

a.ali{text-decoration:none;
color: white;
padding-top:10px;
padding-bottom:0px;
text-align:center;
font-family:helvetica;
font-weight:bold;
font-size:1em;

}

a.ali:hover{color:blue;
}

#content{

padding:180px 0px 0px 0px;

float:left;
width:100%;
margin-top:20px;
margin-left:4.044%;/*40px*/
margin-right:2.022%;/*20px*/
margin-bottom:0px;
}


#footer{background:url(/images/footer-slice.png) repeat-x;
padding:15px 0px 15px 0px;
border:;
float:left;
width:100%;
margin-top:-40px;
}

a.tou{
font-family:arial;
text-size:10px;
color:white;
text-decoration:none;
}

a.tou:hover{
color:blue;
}

p{
font-family:arial;
text-size:10px;
color:white;

}

#wrapper{
margin-left:auto;
margin-right:auto;
width:80%;/*989px*/
max-width:80%;
min-width:989px;
-moz-box-shadow: 0px 0px 5px 5px #888; 
-webkit-box-shadow: 0px 0px 5px 5px #888; 
box-shadow: 0px 0px 5px 5px #888; 
}

.clear {
clear:both;
}

.title{
font-family:myriad pro;
color:#2e4d9b;
position:relative;
bottom:180px;
right:350px;
}

.sales-page{
background:url(/images/sales-page.png) no-repeat;
float:left;
position:relative;
bottom:140px;
left:6%;
padding-top:426px;
width:100%;
max-width:100%;
margin-bottom:-100px;
clear:both;
}

.get-website-now{
background:url(/images/get-website-now.png) no-repeat;
padding-top:40px;
padding-bottom:40px;
padding-left:18.20%;/*180px*/
padding-right:18.20%;
float:left;
position:relative;
bottom:230px;
left:31%;
margin-top:0px;
clear:both;
}
.get-website-now:hover{
opacity:0.9;
}

</style>
</head>
<body>

<div id="wrapper">

<div id="header">
<h1>Your Name And Logo</h1> 
</div><!--end header-->
<div id="menu">
<ul>
<li><a class="ali" href="index.html">Home</a></li>
<li><a class="ali" href="products.php">Products</a></li>
<li><a class="ali" href="contact.php">Contact</a></li>

</ul>
</div><!--end menu-->
<div id="content">
<h1 class="title">Home</h1>
<div class="sales-page"></div>
<a href="products.php" class="get-website-now" style=""></a>
</div><!--end content-->

<div id="footer">
<p><a class="tou" target="_blank" href="/terms-and-conditions.html">Terms and Conditions</a>&nbspFive80Nine Web Design All Rights Reserved 2013</p>
</div><!--end footer-->
<div class="clear"></div>

</div><!--end wrapper-->

</body>
</html>

这是我网站的链接:http://webdesign.five80nine.com

最佳答案

避免在宽度上使用 % 以避免此类问题。特别是在你的 wrapper 上使用固定宽度。然后按照 macky nyxzz 的建议添加 

margin: 0 auto

在您的包装器中，使其在任何屏幕分辨率下居中。我以前遇到过这种问题，这就是解决方法。这是一个链接，供您阅读有关 How to Center a Website With CSS 的更多信息.希望这可以帮助。 :)

更新:您可以在不同的屏幕分辨率下测试您的网站 here

关于css - 在所有屏幕尺寸上居中网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18732319/

24 4 0
文章推荐： javascript - 通过页面滚动显示动画
文章推荐： c++ - 尝试在 C++ 中使用列表时编译错误
文章推荐： java 。确定两个方法调用具有相似的线程上下文
文章推荐： c++ - 请指出这个字符串反转函数有什么问题？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com