HTML5 <div>внутри по центру <body> - PullRequest
Новая
       0

HTML5 <div>внутри по центру <body>

4 голосов
/ 26 июля 2011

Есть ли способ разместить div внутри тела, по центру, с заданными левым и правым полями, равными x, и верхним-нижним полями, равными y?Ничто, кроме div (и его дочерних элементов), не представлено в документе.

ОБНОВЛЕНИЕ.Я хочу следующее:

enter image description here

Кроме того, я был бы рад найти более общее решение для случая, когда x1! = X2, y1! = Y2 (хотярешение для моего конкретного случая x1 == x2, y1 == y2 приветствуется).

Ответы [ 4 ]

8 голосов
/ 10 сентября 2012

Лучшее решение (?): Установите для полей слева и для полей справа «auto»

4 голосов
/ 26 июля 2011

Лучшее, что я могу сделать без CSS3 - это использовать два div. 

html {
    width: 100%;
    height: 100%;
}
body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
div.parent {
    display: inline-block;
    position: relative;
    left: 50%;
    top: 50%;
}
div.child {
    width: 100px;
    margin-left: -50%;
    margin-top: -50%;
    border: 1px solid #000;
}

Вы можете увидеть это здесь: http://jsfiddle.net/CatChen/VGpdv/4/

Обновление: Если CSS3реализация приемлема, это намного проще:

http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

4 голосов
/ 26 июля 2011

Вы можете использовать фиксированное позиционирование.Однако в IE6 он не будет работать. 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
    <head>
        <meta charset='utf-8' />
        <title>Test</title>
        <style>
            #bla {
                position: fixed;
                top: 30px;
                left: 60px;
                right: 60px;
                bottom: 30px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id='blah'>
        </div>
    </body>
</html>

См. В действии: http://obda.net/stackoverflow/position-fixed.html

3 голосов
/ 26 июля 2011

Вам придется использовать javascript, если вы хотите, чтобы поля были одинаковыми во всех браузерах. 

<body>
  <div id="the_div" style="margin: 20 auto;margin-bottom:0;width:300px;">
  </div>
  <script type="text/javascript">
    var dim = (function () {
      var _pW, _pH;
      if (document.body && document.body.offsetWidth) {
        _pW = document.body.offsetWidth;
        _pH = document.body.offsetHeight;
      }
      if (document.compatMode == 'CSS1Compat' && 
          document.documentElement && document.documentElement.offsetWidth) {
        _pW = document.documentElement.offsetWidth;
        _pH = document.documentElement.offsetHeight;
      }
      if (window.innerWidth && window.innerHeight) {
        _pW = window.innerWidth;
        _pH = window.innerHeight;
      }

      return { width : _pW, height : _pH };
    })();

    var div = document.getElementById( "the_div" );
    div.style.height = dim.height - 20 + "px";
  </script>
<body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...