Как отцентрировать div блок

Тема в разделе "Веб-дизайн", создана пользователем zero20, 20 дек 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. zero20

    zero20

    Регистр.:
    23 апр 2006
    Сообщения:
    232
    Симпатии:
    49
    Верстаю шаблон, шапку на див
    кусок такой:
    HTML:
    
    код стилей
    body{
    margin: 0;
    width: 100%;
    padding: 0;
    
    }
    #header{
    width: 980px;
    font-family: arial, tahoma, verdana, sans-serif;
    }   
    .img1{
    background: url(../img1.gif) no-repeat;
    width: 169px;
    height: 126px;
     float: left;
    }
    .img2{
    background: url(../img2.gif) no-repeat;
    width: 290px;
    height: 126px;    
     float: left;
     }  
    .img3{
    background: url(../img3.gif) no-repeat;
    width: 147px;
    height: 126px;    
     float: left;
     }  
    ...
    html код
    <div id="header">
      
      <div><div class="img1"></div>
      <div class="img2"></div>
      <div class="img3"></div>
      <div class="img4"></div>
      <div class="img5"></div>
      <div class="img6"></div>
      </div>
      <div>
    <div class="img7"></div>
    <div class="img8"></div>
    <div class="img9"></div>
    <div class="img10"></div>
    <div class="img11"></div>
    <div class="img12"></div>
      </div>
      </div>
    
    Шапка состоит из порезанного на 12 кусков изображения
    в два ряда
    проблема такая, не могу отцентрировать шапку (изображение)
    как видно из классов они наследуются селектором header, вот его нужно отцентрировать
    отступы не предлагать, нужно просто центровку относительно всего body,так как хочу чтобы при больших разрешениях (1600 х XXXX ) вставлялась подложка по краям.
     
  2. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Ну задай хеадеру ширину и margin:0 auto; должно работать...
     
    zero20 нравится это.
  3. spllin

    spllin Прохожие

    неа.это мало там еще чето надо вписать..:confused:
    1.пошарся в google и найди.
    2.скачай похожую шапки и посмотри
     
  4. majahead

    majahead

    Регистр.:
    12 май 2008
    Сообщения:
    376
    Симпатии:
    107
    Ну ещё надо фиксированную ширину прописать, но этот момент можно пропустить :D
     
  5. zero20

    zero20

    Регистр.:
    23 апр 2006
    Сообщения:
    232
    Симпатии:
    49
    Ширина хидера фиксированна с авто отступом по бокам все работает
     
  6. rekill

    rekill Создатель

    Регистр.:
    29 апр 2008
    Сообщения:
    20
    Симпатии:
    4
    PHP:
    #header{
    width980px;
    font-familyarialtahomaverdanasans-serif;
    text-aligncenter;
    margin-leftauto;
    margin-rightauto;
    }   
    в коде стилей нужно хедер так прописать, все получится! удачи.
     
  7. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Мльа, понту писать строчку еще одну... если мой вариант, который помог, отлично работает??
     
  8. belstar

    belstar Создатель

    Регистр.:
    4 июл 2009
    Сообщения:
    21
    Симпатии:
    1
    Если в css чего то не работает, а у кого то это что то работает сто пудов, то нужно смотреть DOCTYPE. При всех одинаковых переменных, он один может обосрать ситуацию!
    А вообще,Имхо, то что нужно отцентровать добавляешь в <div style="margin:0 auto;"> и все моментально центруется. Вот.:p
     
  9. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Я вот так сделал
    Код:
    <div style="position: absolute; left: 50%; margin-left: -453px; top: 14px; width: 906px; height:106px;">
     
  10. serz89

    serz89 Создатель

    Регистр.:
    18 янв 2009
    Сообщения:
    16
    Симпатии:
    3
    Когда просто блок по центру, то всегда делаю так, как rafic написал. А если относительно центра элемент какой ни будь, на сайте с фиксированной шириной, то как UDAV. Но если таким образом шапку отцентровать, то могут потом возникать неудобства, например все что ниже шапкои залезет под шапку, т.к. position: absolute. =]
     
Статус темы:
Закрыта.