3

所以我有这个模板设计，目前是绝对定位的，但我试图让它在任何宽屏浏览器中居中。我尝试在容器的左侧和右侧设置宽度自动，但它仍然与左侧对齐。

CSS

  .JosephSettin_png
  {
   position: absolute;
   left:0px;
   top:0px;
   width:216px; 
   height:40px;
   background: url("JosephSettin.png") no-repeat;
  }
  .home_png
  {
   position: absolute;
   left:472px;
   top:16px;
   width:48px; 
   height:16px;
  }
  .discography_png
  {
   position: absolute;
   left:528px;
   top:16px;
   width:80px; 
   height:24px;
  }
  .purchase_png
  {
   position: absolute;
   left:608px;
   top:16px;
   width:88px; 
   height:24px;
  }
  .about_png
  {
   position: absolute;
   left:696px;
   top:16px;
   width:48px; 
   height:24px;
  }
  .contact_png
  {
   position: absolute;
   left:744px;
   top:16px;
   width:56px; 
   height:24px;
  }
  .main__pic_png
  {
   position: absolute;
   left:0px;
   top:56px;
   width:264px; 
   height:264px;
   background: url("main_pic.png") no-repeat;
  }
  .footer__lines_png
  {
   position: absolute;
   left:0px;
   top:512px;
   width:800px; 
   height:24px;
   background: url("footer_lines.png") no-repeat;
  }
  .info__heading_png
  {
   position: absolute;
   left:32px;
   top:360px;
   width:216px; 
   height:32px;
   background: url("info_heading.png") no-repeat;
  }
  .info__pic3_png
  {
   position: absolute;
   left:265px;
   top:360px;
   width:159px; 
   height:112px;
   background: url("info_pic3.png") no-repeat;
  }
  .info__pic2_png
  {
   position: absolute;
   left:432px;
   top:360px;
   width:176px; 
   height:112px;
   background: url("info_pic2.png") no-repeat;
  }
  .info__pic1_png
  {
   position: absolute;
   left:616px;
   top:360px;
   width:177px; 
   height:112px;
   background: url("info_pic1.png") no-repeat;
  }
  .info__pane_png
  {
   position: absolute;
   left:0px;
   top:345px;
   width:800px; 
   height:144px;
   background: url("info_pane.png") no-repeat;
  }
  body
  {
   text-align: center;
   background-color:maroon;
  }
  #wrapper {
            width: 800px;
            margin-left: auto;
   margin-right: auto;
            text-align: left;
  }
  #a {
   text-decoration: none;
   color:white;
   font-weight:bold;
  }
 .style1 {
  font-weight: bold;
  color: #FFFFFF;
 }

html

    <body>
  <center>
  <div id="wrapper">
    <div class="JosephSettin_png"> </div>
    <div class="home_png"> <a href="home.html" style="color:yellow">Home</a></div>
    <div class="discography_png"> <a href="discography.html">Discography</a></div>
    <div class="purchase_png"><a href="store.html"><span class="style1">Store</span></a></div>
    <div class="about_png"><a href="about.html">About</a></div>
    <div class="contact_png"><a href="contact.html"><span class="style1"></span>Contact</a></div>
    <div class="ad_png"> </div>
    <div class="main__pic_png"> </div>
    <div class="welcome__header_png"> </div>
    <div class="welcome__text_png"> </div>
    <div class="footer__lines_png"> </div>
    <div class="footer__text_png"> </div>
    <div class="info__pane_png"></div>
    <div class="info__heading_png"> </div>
    <div class="info__text_png"> </div>
    <div class="info__pic3_png"> </div>
    <div class="info__pic2_png"> </div>
    <div class="info__pic1_png"> </div>
    <div class="info__pic3_png"> </div>
  </div>
  </center>
  </body>

如果我所有的 div 类都没有绝对定位，我知道我创建的容器可以工作。我必须改变位置还是我犯了另一个错误？

4

3 回答 3

5

添加position: relative;到.wrapper定义中。

http://www.w3.org/TR/CSS2/visuren.html#choose-position

绝对定位的项目必须在相对定位的项目内部，否则将无法按您的预期显示。

于 2010-03-15T23:00:48.010 回答
0

您的主要问题是您的包装器必须是 position:relative; 和保证金：0自动；将使包装器居中。您也可以摆脱不需要的 HTML 元素。

CSS：

#wrapper {
position:relative;
width: 800px;
margin:0 auto;
text-align: left;
}

希望这可以帮助。

于 2010-03-16T09:57:40.410 回答
-3

我强烈建议使用像“Blueprint CSS”这样的 CSS 框架。它将为您节省大量时间，不仅有助于定位元素，而且还具有许多不错的功能，例如排版、用于多浏览器支持的 css 重置等。

于 2010-03-15T23:15:37.023 回答