изменить абсолютно позиционированную веб-страницу на центрированную

StackOverflow https://stackoverflow.com/questions/2451043

  •  20-09-2019
  •  | 
  •  

Вопрос

Итак, у меня есть этот шаблон, который на данный момент абсолютно позиционирован, но я пытаюсь сделать его центрированным в любом широкоэкранном браузере.Я попробовал сделать автоматическую ширину слева и справа в моем контейнере, но она все равно выровнена по левой стороне.

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 не позиционированы абсолютно.Нужно ли менять позицию или я допустил еще одну ошибку?

Это было полезно?

Решение

Добавлять position: relative; к .wrapper определение.

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

Абсолютно позиционированный элемент должен находиться внутри относительно позиционированного элемента, иначе он не будет отображаться так, как вы предполагали.

Другие советы

Ваша основная проблема заключается в том, что ваша оболочка должна быть позиции: относительной;и маржа: 0 авто;центрирует обертку.также вы можете избавиться от элемента HTML, он не нужен.

CSS:

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

Надеюсь это поможет.

Я настоятельно рекомендую использовать структуру CSS, например «Blueprint CSS».Он сэкономит вам много времени и поможет не только с позиционированием элементов, но и предоставит множество приятных функций, таких как типографика, сброс CSS для поддержки нескольких браузеров и т. д.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top