CSS Advanced Div Позиционирование. Центр и Середина - PullRequest
Новая
       15

CSS Advanced Div Позиционирование. Центр и Середина

2 голосов
/ 27 декабря 2010

Я хочу расположить <div>

  • По центру с шириной тела
  • По центру с высотой тела

Див будетимеют следующие свойства:

  • ширина div будет составлять 90%
  • высота div авто, мин.будет известно

Ответы [ 4 ]

4 голосов
/ 27 декабря 2010

Я проверял это в IE8 , Firefox, Chrome. Это не работает в IE7.

Если вам нужно, чтобы это работало в <= IE7, я думаю, самое простое решение - отказаться от чистого CSS и использовать javascript для вертикального позиционирования. </p>

Live Demo

HTML: 

<div id="container"> 
    <div id="content"> 
        <input type="button" value="click me" onclick="javascript:document.getElementById('content').innerHTML += 'i i i i i i i i i i i i i i i i i i i i i i i i i<br />';" /><br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
    </div> 
</div>

CSS: 

html, body {
 margin: 0;
 padding: 0;
 border: 0;

 width: 100%;
 height: 100%
}

body {
 display: table
}

#container {
 width: 100%;
 display: table-cell;
 vertical-align: middle
}

#content {
 background: red;
 width: 90%;
 margin: 0 auto;
 min-height: 150px
}
3 голосов
/ 27 декабря 2010

Вы можете отцентрировать высоту примерно так (остерегайтесь совместимости с браузером).

Для ширины центрирования: вы можете использовать position: absolute; и left: 50%;, а их margin: -num;. На полях замените num на половину ширины div.

1 голос
/ 27 декабря 2010

Установите div с этим. Я считаю, что это не работает в IE 7 и ниже. Ужасный ИЭ ....

маржа: авто; верх: 0; правая: 0; слева: 0; внизу: 0; позиция: абсолютная;

0 голосов
/ 27 декабря 2010

Вы можете использовать поле (влево, вправо) 5%, чтобы имитировать эффект ширины центрирования.

Что касается центрирования по высоте, я не знаю, как вы можете сделать это только с помощью css (потому чтонеизвестного вертикального размера).Но вы можете попробовать использовать javascript для этого.

Вот пример: http://www.demtron.com/blog/post/2009/01/14/Centering-a-DIV-Window-with-Cross-Browser-JavaScript.aspx (вы можете игнорировать часть размера обнаруживающего окна).

...