0

我需要帮助将我的网页集中在小屏幕尺寸上。我的网站在 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

4

4 回答 4

1

避免在宽度上使用 % 来避免此类问题。尤其是在您的包装器上，请改用固定宽度。然后正如 macky nyxzz 所建议的那样添加

margin: 0 auto

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

更新：您可以在此处以不同的屏幕分辨率测试您的网站

于 2013-09-11T04:40:17.880 回答
0 
   #wrapper{
       margin: 0 auto;
    }

这将使您的 div 以您忘记放置 auto 的所有屏幕分辨率居中

于 2013-09-11T03:48:32.700 回答
0

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

如果其他人有更好的解决方案，我很想听听。:)

于 2013-09-14T01:04:53.207 回答
0

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

干杯！

莫基斯塔

于 2014-09-11T17:00:15.693 回答