Question

我需要帮助将我的网页放在小屏幕尺寸上。我的网站看起来很正常，它的正常宽度为989px，但是当它变小时会被推到左边，右边有很多空白区域。我一直在尝试很多方法来解决这个问题，但没有任何作用。

现在取决于你们。希望你能帮忙。

    <!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

Answer 1

避免在宽度上使用％来避免这些问题。特别是在您的包装上使用固定宽度。然后就像macky nyxzz建议的那样添加

margin: 0 auto

在你的包装器中

使其以任何屏幕分辨率为中心。我之前遇到过这种问题，这就是修复。这是一个链接，供您阅读有关How to Center a Website With CSS的更多信息。希望这可以帮助。：）

更新：您可以使用不同的屏幕分辨率here

测试您的网站

Answer 2

   #wrapper{
       margin: 0 auto;
    }

这将使您的div在您忘记自动放置的所有屏幕分辨率中居中

Answer 3

我设法解决了问题，但这不是我想要的解决方案。我在包装器周围添加了一个表格并围绕宽度进行播放，直到找到合适的宽度使页面居中。该页面现在以各种尺寸为中心，包括平板电脑和手机尺寸。

如果其他人有更好的解决方案，我很乐意听到。：）

Answer 4

使文章标签包装正文中的所有文档，然后将文本对齐到css的中心，并将所有主标记容器放在此标记内。在margin: 0 auto;时放footer clear: both。如果margin 0 auto与标题标记的宽度相同，请不要将footer添加到{{1}}。然后刷新浏览器并重新调整大小。它会将您的文档放在中心。

喝彩！

Mokista

所有屏幕尺寸的中心网站

4 个答案: