Динамическое центрирование Div - PullRequest
Новая
       26

Динамическое центрирование Div

3 голосов
/ 20 сентября 2011

Я перешел на MSDN и Google Coding , и они оба приводят один и тот же пример.Они говорят, что вы можете центрировать div таким образом, но это не работает.Кто-нибудь знает почему?Я также хотел бы знать лучший способ центрировать div.Я пытался сделать margin: 0 auto;это не сработало.

Ответы [ 7 ]

3 голосов
/ 20 сентября 2011

Для работы трюка с полем нужно указать определенную ширину: ссылка 

<div style='width:800px;margin:0 auto;'>Div Middle</div>
2 голосов
/ 20 сентября 2011

Я вижу, что все в основном публикуют одно и то же, но все они составляют правила, согласно которым оно должно быть внутри ограничивающего деления (fyi, <body> прекрасно работает как «контейнер», у нет должно быть делением) или должно иметь заданную ширину. Очевидно, что если вы не установите ширину, то поле не будет иметь никакого эффекта, поскольку оно будет расширяться до полной ширины (то есть без области поля).

Если вы не публикуете фактический HTML и CSS, который вы используете, мы действительно не сможем вам помочь, потому что мы понятия не имеем, что происходит. По стандартам margin: 0 auto должно работать, точка. Как указано выше, даже если вы не укажете ширину, «auto» все равно будет применено и будет просто вычислено как 0, поскольку деление распространяется на всю ширину и, таким образом, поле для заполнения отсутствует.

Единственное, что приходит на ум, - это то, что вы удаляете стиль на уровне блоков. Возможно, вы определяете это как display: inline? Встроенные элементы не могут иметь полей и будут обращать внимание на свойство text-align родительского элемента. Кроме того, если вы перемещаете деление каким-либо образом, вы, очевидно, не можете сказать, что его центрируют, потому что смысл плавания состоит в том, чтобы подтолкнуть его влево или вправо (не в центр). Мы могли бы продолжать строить предположения, но на самом деле вы должны улучшить свой вопрос. Еще одно примечание для добавления: вы не можете использовать margin: 0 auto с элементами фиксированной позиции .

2 голосов
/ 20 сентября 2011

Какой браузер вы используете?У вас есть пример кода.Возможно, gist.github.com или jsfiddle.net.

Если я сделаю вывод, что вы хотите, вам понадобятся несколько вещей.

  1. A, содержащий DIV
  2. CSS width определено для дочернего DIV
  3. CSS margin: 0 auto; для дочернего DIV

Следующий пример кода: http://jsfiddle.net/sukima/5RQpw

HTML 

<div id="parent">
    <!-- Must have a container div -->
    <div id="child">
        This is a test
    </div>
</div>

CSS 

#parent {
    background-color: green;
    /* Center's text not div. Can be here or in child. */
    /* text-align: center; */
}
#child {
    background-color: red;
    width: 80px; /* Required. Develop your own calculation. */
    margin: 0 auto; /* Centers the div */
}
0 голосов
/ 20 сентября 2011

Вам требуется IE8 и выше (я пробовал это на 9). IE жалуется на запуск активных элементов управления x, прежде чем разрешить запуск веб-страницы. 

<html>
  <head>
    <style>
      #oDiv
      {
        background-color: #CFCFCF;
        position: absolute;
        left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
        top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2);
      }
    </style>
  </head>
  <body>
    <div id="oDiv">Example DIV</div>
  </body>
</html>

Проблема, конечно, в том, что это не совместимо со всеми браузерами. Центрирование div по вертикали и горизонтали строго с использованием CSS является более сложным, но может быть сделано. (Это помогает использовать &nbsp; в нужных местах).

0 голосов
/ 20 сентября 2011

Попробуйте ниже. 

#content
{    
    width: 740px;
    clear: both; 
    padding: 0; 
    margin: 0 auto;
}
0 голосов
/ 20 сентября 2011

Если вы не знаете, какого размера будет ваша коробка, вы можете использовать методы термоусадочной упаковки , чтобы позволить вам все еще использовать margin:0 auto. (В уроке, на который я ссылался, они показывают именно то, что было сделано с display:inline и display:table.)

Редактировать: Мой плохой. Они использовали margin:0 auto только для демонстрации display:table термоусадочной упаковки.

0 голосов
/ 20 сентября 2011 
margin: 0; /* reset */
margin-left: auto;
margin-right: auto;
text-align: center; /* For IE */

Вы должны text-align: left для внутренних частей после.

...