Div центр не работает для IE - PullRequest
Новая
       9

Div центр не работает для IE

0 голосов
/ 31 мая 2010

У меня есть этот CSS 

position:relative;
margin: 0 auto;
top:50%;
width:15px;
height:15px;
background-color:#fff;
-moz-border-radius: 15px; 
-webkit-border-radius: 15px;
cursor:pointer;

Он отлично центрируется на хроме и остается на вершине для IE и ff.

удалено и изменено положение:

что здесь не так?

Спасибо Jean

Ответы [ 3 ]

0 голосов
/ 31 мая 2010

margin: 0 auto; для горизонтального центрирования должно работать нормально для IE6 +, но только до тех пор, пока вы находитесь в режиме стандартов. Убедитесь, что вы включили тип документа в стандартном режиме в свой HTML-код, иначе вы попадете в режим Quirks, где ничего не работает должным образом.

Чтобы узнать, находится ли конкретная страница в режиме стандартов, введите javascript:alert(document.compatMode) в адресную строку. CSS1Compat это хорошо; BackCompat это причуды.

Для вертикального центрирования без абсолютного позиционирования top: 50% имеет смысл, только если родительский элемент имеет явную высоту. Так что, если вы собираетесь сдвинуть верхнюю часть на половину высоты браузера, вам нужно будет указать 100% высоту для каждого предка элемента, например. по крайней мере: 

html, body { height: 100%; }
0 голосов
/ 27 ноября 2010

Попробуйте использовать margin-top: 30%; вместо top:50%;
Нет position:relative; требуется.

EDIT
Для выравнивания по центру в IE я использую div-wrapper для справки.
Это весь мой код 

<html>
    <head>
        <style type='text/css'>
            #myDivWrapper {
                text-align: center; /* x axis for ie*/
            }
            #myDiv {
                /* set position */
                margin: 0 auto; /* x axis */
                margin-top: 30%; /* y axis */

                /* draw div */
                background-color: red;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id='myDivWrapper'>
            <div id='myDiv'></div>
        </div>
    </body>
</html>
0 голосов
/ 31 мая 2010 
#div {
    position:relative;
    margin-left:-7.5px; // Half your width in negative
    margin-top:-7.5px; // Half your height in negative
    top:50%;
    left:50%;
    width:15px;
    height:15px;
    background-color:#fff;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px;
    cursor:pointer;
}

Это будет работать во всех браузерах. Визуализация IE может быть ужасной с допустимым кодом, но это проверенный и проверенный мной метод для универсальной работы.

Чтобы отредактировать это, просто измените отрицательные значения полей, чтобы они соответствовали половине высоты или ширины вашего элемента div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...