Почему не нижний колонтитул с полем: 0 авто?

0

Любые идеи, почему нижний колонтитул не центрируется в следующем коде?

<html>
    <head>
        <style>
            #container {width:1000px;margin:0 auto;}
            #footer {margin:0 auto;}
        </style>
    </head>
    <body>
        <div id="container">

            <div>
                lksdfkjjindskfjsfkjflskfjsls.....sdlfkajsf
                sdfkjkkdiidkdkn   asdflkajf;lskdfioasfnasldf  ;lkjlthis is just a testing  
                ' sdlfk  sdlfk  dslfkjsf lskdfjsaf this elobrate   asdfkj   
                sdlfk  sldkfjsodsf lsdkfj   dlkjhgkjhgkjhg
            </div>

            <div id="footer">
                copyright 2014
            </div>

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

http://jsfiddle.net/WJw5H/

  • 1
    Потому что его ширина 100% . DEMO
  • 0
    Добавьте text-align: center к родителю в качестве резервной копии для margin: 0 auto
Теги:

3 ответа

5
Лучший ответ

По умолчанию div является блочным элементом. Это означает, что он имеет width: 100%; , margin: 0 auto; будет центрировать элемент, но как он может это сделать, если его width: 100%.

В этом отношении!

На самом деле он имеет width: auto, которая для элемента блочного уровня является полной шириной своего контейнера, но это не 100%, потому что в противном случае добавление переполнило бы его - Niet the Dark Absol

ДЕМО ЗДЕСЬ

CSS:

#footer { width: 200px; margin:0 auto;}

Также вы можете просто text-align: center;

ДЕМО ЗДЕСЬ

Поделиться
  • 2
    На самом деле он имеет width: auto , которая для элемента уровня блока является полной шириной его контейнера - но это не 100% потому что в противном случае padding приведет к переполнению;)
  • 0
    Это не ширина 100%. Это 1000px.
Показать ещё 1 комментарий
1

Установка width будет разрешаться, но вам нужно будет рассчитать точную width для нее, а когда нижний колонтитул изменится, вам также нужно будет пересчитать и обновить свойство width.

Хорошим решением для этого будет установка display в table, поэтому проблема с шириной будет автоматически решена:

#footer {
    margin:0 auto;
    display: table;
}

Смотрите здесь скрипку

Поделиться
  • 1
    Хорошее решение для динамической ширины.
1 
#footer { text-align: center;  

   margin-left: auto ;
  margin-right: auto ;

}

попробуйте, он будет работать отлично

скопируйте это на демо на http://jsfiddle.net/WJw5H/15/

<div id="container">

this is just a test.
</div>
<div id="footer">

copyright 2014

</div>

#container {width:1000px;margin:0 auto;}
#footer { text-align: center;  

   margin-left: auto ;
  margin-right: auto ;
Поделиться
  • 0
    text-align: center; уже был предложен Радди. С другой стороны, ваш предыдущий ответ с использованием <center> будет дополнением к теме (даже если бы я не предлагал использовать <center> ).
  • 0
    я пробую то, что было предложено Радди, и у меня не получилось, пока я не добавил поля слева: авто; поле справа: авто; так что я добавлю это решение
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню