Div не по центру - PullRequest
Новая
       5

Div не по центру

0 голосов
/ 25 октября 2011 
<a href="javascript:;" onclick="$('#example').fadeIn('fast');">FadeIn!</a>

<div class="midbox" id="example" style="display:none;">
    Lorum ipsum<br>
    <br>
    [<a href="javascript:;" onclick="$('#example').fadeOut('fast');">Close</a>]
</div>


.midbox{
    display:block;
    position:absolute;
    top:50%;
    left:35%;
    padding: 8px;
}

Я просмотрел много тем в Google и здесь, в Stackoverflow, но не могу найти свой ответ.

Я помещаю промежуточные классы непосредственно перед концом тега body (</body>). Теперь я нажимаю на эту ссылку, чтобы скрыть окно, но оно не отображается посередине, оно отображается без кода, который я ему дал, и внизу страницы.

Почему он это делает? Ребята, вы можете мне помочь?
Спасибо.

Ответы [ 4 ]

1 голос
/ 25 октября 2011

Вот, пожалуйста: 

.midbox{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:600px;
    height:400px;
    margin-left:-300px;     /* half of width */
    margin-top:-200px;     /* half of height */
    padding: 8px;
}

DEMO

1 голос
/ 25 октября 2011

Как вы можете видеть в этом примере , ваш скрипт работает.
Обратите внимание, что ваш элемент midbox позиционируется абсолютно, но абсолютно позиционированные элементы позиционируются относительно относительно первого родителя, который имеет позицию, отличную от static.
Этот случай показан здесь .
Пожалуйста, проверьте, если это не ваш случай.
Надеюсь, это поможет!

0 голосов
/ 25 октября 2011

Поместите стили в верхнюю часть страницы: 

<head>
<style type="text/css">
    <!--Your styles here-->
   .midbox{
     display:block;
     position:absolute;
     top:50%;
     left:35%;
     padding: 8px;
   }

</style>
</head>

или лучше создайте внешний CSS-файл и свяжите его с HTML-файлом. 

<link rel="stylesheet" type="text/css" href="path/to/your.css">
0 голосов
/ 25 октября 2011

Попробуйте поместить этот код в CSS

body, html{ height:100%; width:100%; }

...