Как я могу центрировать, используя проценты? - PullRequest
Новая
       33

Как я могу центрировать, используя проценты?

3 голосов
/ 13 марта 2011

В качестве эксперимента я пытался центрировать DIV в теге BODY, используя проценты в CSS. Я думаю, что я понял это в один момент, но благодаря магии TopStyle, не имеющей истории после сохранения, я потерял ее.

Итак, вот мой HTML: 

<html>
    <head>
        <link href="shadow.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

А вот мой CSS: 

*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: #EEEEEE;
    margin: 10%;
}

div#box
{
    position: absolute;
    background-color: #FFFFFF;
    width: 740px;
    min-width: 80%;
    min-height: 80%;
    border: #CCCCCC thin solid;
}

Чтобы ответить на ваши ближайшие вопросы:

Почему я использую абсолютное позиционирование на поле?
Так что коробка будет принимать 80% высоты, даже если ее не растягивать.

Почему я ширина, минимальная ширина и минимальная высота, как это?
Поскольку я хочу, чтобы блок DIV занимал 80% доступного пространства, имело смысл использовать минимумы. Я использую ширину пикселя, чтобы убедиться, что независимо от того, насколько мала область, она не станет тоньше, чем 740 пикселей, в результате чего браузер активирует горизонтальную полосу прокрутки. Теоретически, высота контента должна активировать вертикальную полосу прокрутки, если толчки контента прошли 80% доступной области.

Теперь хитрость заключается в том, чтобы сделать его центрированным по центру и сохранить 10% пространства вокруг коробки. Я пытался применить "маржа: 10%;" для тела, затем "заполнение: 10%;" в тело, и, наконец, «маржа: 10%» в поле DIV. Все эти варианты дают мне один и тот же результат: он центрирован по горизонтали, но действует странно по вертикали. Я не получаю даже пространство со всех сторон. Единственное, что ведет себя так, как хотелось бы, - это то, что блок DIV, похоже, использует 80% доступного пространства.

Кажется, это должно быть правильно. Поле DIV занимает 80%, поля занимают 10% с каждой стороны (20% по вертикали и 20% по горизонтали), что составляет 100%. Не уверен, почему это не работает.

Клянусь, у меня это работало аналогичным образом, и теперь я потерял его.

У кого-нибудь есть объяснение, почему проценты не отображаются правильно и какое решение мне нужно?

Спасибо!

Ответы [ 2 ]

4 голосов
/ 13 марта 2011

Попробуйте так: 

*
{
    margin: 0;
    padding: 0;
}

body { background-color: #EEEEEE; }

div#box
{
    position: absolute;
    border: #CCCCCC thin solid;

    top: 10%;
    left: 10%;

    width: 80%;
    height: 80%;

    min-width: 740px;
    min-height: 500px;    
}

IE позволит DIV сжаться ниже ваших пределов, так как min-width и min-height не работают.

0 голосов
/ 13 марта 2011

Удалить position:absolute; из #box

Добавьте это к #box - margin:0 auto;

Избавиться от вещей в body

JSFiddle Demo

JSFiddle Edit

...