无法使我的网页以不同的分辨率居中

时间：2015-10-02 14:43:32

标签： html css

我创建了一个网页，（我是一个相当新的编码和网页设计），我在使用不同尺寸的显示器上查看内容时遇到问题。我认为它是因为我使用绝对定位，但不是100％肯定，不知道如何纠正它。任何帮助或建议将不胜感激！ ：）

这是我的HTML .... 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
    <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
    <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
    <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!-->
    <html lang="en">
    <!--<![endif]-->
    <head>
    <!-- Basic Page Needs
     ================================================== -->
    <meta charset="utf-8" />
    <title>BUZZ FEED</title>
<meta http-equiv="refresh" content="60" >


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->



<!-- CSS
================================================== -->

<link rel="stylesheet" href="css4/main.css" />

<html>
<head>
    <title>BUZZ Feed</title>
</head>
<body>
<div id="wrap">
<!-- Weather -->

<TABLE BORDER="0" style="position:absolute; TOP:25px; LEFT:320px; WIDTH:50px; HEIGHT:50px">
<TR>


   <TD><span style="display: block !important; width: 180px; text-align: center;      font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:90745.1.99999&bannertypeclick=wu_blueglass" title="Long Beach, California Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KLGB&ForcedCity=Long Beach&ForcedState=CA&zip=90745&language=EN" alt="Find more about Weather in Long Beach, CA" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:90745.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:98011.1.99999&bannertypeclick=wu_blueglass" title="Bothell, Washington Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KPAE&ForcedCity=Bothell&ForcedState=WA&zip=98011&language=EN" alt="Find more about Weather in Bothell, WA" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:98011.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:87101.1.99999&bannertypeclick=wu_blueglass" title="Albuquerque, New Mexico Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KABQ&ForcedCity=Albuquerque&ForcedState=NM&zip=87101&language=EN" alt="Find more about Weather in Albuquerque, NM" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:87101.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><form action="http://molinaintranet/apps/noc/_layouts/15/Molina.NOC.IncidentTimeline/TimeLineStatus.aspx">
<button type="submit" class="Button" style=";margin-left:auto;margin-right:auto;display:block;margin-top:10%;margin-bottom:0%"/>NOC Status Page</a>
</form></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:43081.1.99999&bannertypeclick=wu_blueglass" title="Westerville, Ohio Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KCMH&ForcedCity=Westerville&ForcedState=OH&zip=43081&language=EN" alt="Find more about Weather in Westerville, OH" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:43081.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:48007.1.99999&bannertypeclick=wu_blueglass" title="Troy, Michigan Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KVLL&ForcedCity=Troy&ForcedState=MI&zip=48007&language=EN" alt="Find more about Weather in Troy, MI" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:48007.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:00901.1.99999&bannertypeclick=wu_blueglass" title="San Juan, Puerto Rico Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=TJSJ&ForcedCity=San Juan&ForcedState=PR&zip=00901&language=EN" alt="Find more about Weather in San Juan, PR" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:00901.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>

<!-- Time --->


<div style="position:absolute; TOP:150px; LEFT:355px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/California/Long_Beach/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=California&city=Long Beach&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=117"></script></div>
<div style="position:absolute; TOP:150px; LEFT:540px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Washington/Bothell/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Washington&city=Bothell&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=117"></script></div>
<div style="position:absolute; TOP:150px; LEFT:725px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/New_Mexico/Albuquerque/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=New Mexico&city=Albuquerque&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=117"></script></div>
<div style="position:absolute; TOP:150px; LEFT:1045px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Ohio/Westerville/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Ohio&city=Westerville&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=100"></script></div>
<div style="position:absolute; TOP:150px; LEFT:1230px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Michigan/Troy/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Michigan&city=Troy&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=100"></script></div>
<div style="position:absolute; TOP:150px; LEFT:1415px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Puerto_Rico/San_Juan/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Puerto Rico&city=San Juan&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=100"></script></div>



<!-- ESD Marquee -->

<marquee behavior="slide" width="60%" style="position:absolute; TOP:320px; LEFT:875px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="50" direction=""><b><FONT COLOR="#004C4C">Log File</font></b> = <b><FONT COLOR="#E65C00"> 9152</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:340px; LEFT:800px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="40" direction=""><b><FONT COLOR="#004C4C">Configuration Item</font></b> = <b><FONT COLOR="#E65C00"> Microsoft Outlook</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:360px; LEFT:749px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="35" direction=""><b><FONT COLOR="#004C4C">BUZZ word for current CI</font></b> =<b><FONT COLOR="#E65C00"> Outlook - MS Exchange Issue</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:380px; LEFT:761px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="25" direction=""><b><FONT COLOR="#004C4C">Date/Time of Occurrence</font></b> = <b><FONT COLOR="#E65C00"> Friday 09/30/15 @ 8:50 AM PST</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:400px; LEFT:790px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="20" direction=""><b><FONT COLOR="#004C4C">Date/Time of Posting</font></b> = <b><FONT COLOR="#E65C00"> Friday 09/30/15 @ 9:05 AM PST</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:420px; LEFT:858px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="18" direction=""><b><FONT COLOR="#004C4C">Tier Status</font></b> =<b><FONT COLOR="#E65C00"> Tier 1</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:460px; LEFT:858px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="17" direction=""><i><FONT COLOR="#007C7C">IVR HAS BEEN SET</font></i></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:480px; LEFT:858px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="16" direction=""><i><FONT COLOR="#007C7C">NOC HAS BEEN NOTIFIED</font></i></marquee>

</div>
</body>
</html>

这是我的CSS ..... 

/* "auto" makes the left and right margins center the wrapper */
#wrap { 
    width: 900px; 
    margin: 0 auto; 
}





.Button {
    -moz-box-shadow: 0px 10px 14px -7px #276873;
    -webkit-box-shadow: 0px 10px 14px -7px #276873;
    box-shadow: 0px 10px 14px -7px #276873;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
}
.Button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
    background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
    background-color:#408c99;
}
.Button:active {
    position:relative;
    top:1px;
}
#page-wrap {
     width: 800px;
     margin: 0 auto;
}

再次感谢您的帮助！

3 个答案:

答案 0 :(得分：2)

首先，不要使用表格进行布局。我们以天气预报盒为例。您可以将每个包装在一个div中，而不是将它们放在一个表格单元格中，然后将它们全部放在一个包装div中，就这样... 

    <div class="weatherwrapper">
      <div class="weatheritem">...</div>
      <div class="weatheritem">...</div>
      <div class="weatheritem">...</div>
    </div>

然后应用以下样式将项目居中...... 

    .weatherwrapper {
      text-align: center;
    }
    .weatheritem {
      display: inline-block;
    }

答案 1 :(得分：1)

当您使用绝对定位时，您告诉浏览器您知道完全在哪里布置元素。要使内容居中，您需要让浏览器自动确定边距（元素之间的间距）。

您尝试使用wrapper CSS类执行此操作，但由于包装器<div>的子项使用绝对定位，因此浏览器在计算包装器的边距时会忽略它们（因为您说你用绝对定位知道把它​​们放在哪里。

要使您的网站以不同的显示为中心，请将天气指标div设置为display: inline-block;并使用边距进行间距。

答案 2 :(得分：0)

您可能会发现使用百分比宽度和高度值更容易。 也是视口值而不是固定像素。 例如

    width: 100%;
    height: 80%;
    text-align: center;
    font-size: 2.5vw;

更改分辨率时，您会发现自己获得了更具响应性的页面。

相关问题
最新问题