Отношение позиционирования CSS, не отображающее верхнее поле

Моему клиенту нужна веб-страница в середине экрана. Для этого я объявил всю веб-страницу в div под названием mainpage. CSS:Отношение позиционирования CSS, не отображающее верхнее поле

#mainpage 
{ 

    position:relative; 
    width:850px; 
    margin:0 auto; 
    height:70%; 
    top:15%; 
    background:#F1F1F1; 

}

Но приведенный выше css не отображается в середине экрана по вертикали. Если я даю absolute или fixed, он находится посередине экрана по вертикали, но горизонтально он выровнен по правому краю! Как я могу получить желаемый результат?

EDIT: Мои HTML коды

<body> 
<div id="mainpage_wrapper"> 
<div id="mainpage"> 

    <div id="header_wrapper"> 
    <div id="header"> 

     <?php require_once('menu.php'); ?> 
     <?php echo $logo; ?> 
     <?php echo $menu; ?> 

    </div> 
    </div> 


<div id="main-container"> 
<!-- List of logos --> 
    <div id="logolist">

источник

2013-09-02 Nitish

, пожалуйста, напишите свой html-код, поскольку я не знаю, где вы положили #mainpage. – Kooki3

Вы имеете в виду ** выровненный слева ** правый? – iConnor

Вы добавили 'html, body {height: 100%}'? – Pete

Здесь я использую fixed позиционирование.

#mainpage 
{ 

    position:fixed; 
    width:840px; 
    height:300px; 
    top:50%; 
    left: 50%; 
    margin: -150px 0 0 -420px; /* [-(height/2)px 0 0 -(width/2)px] */ 
    background-color:#F1F1F1; 

}

See this fiddle. Надеюсь, эта помощь.

источник

2013-09-02 09:03:34

вместо использования top, использовать margin-top и держать позицию relative

http://jsfiddle.net/xvdnm/

Проверить JS скрипку

Top имеет другое поведение

"top" предназначен для настройки элемента с использованием свойства "position". margin-top - для измерения внешнего расстояния до элемента по отношению к предыдущему. Кроме того, поведение верхнего уровня может различаться в зависимости от типа позиции, абсолютного, относительного или фиксированного.

От:CSS: Top vs Margin-top

источник

2013-09-02 08:49:30 Tikkes

Спасибо за ответ. Будет ли это в середине экрана в таких устройствах, как блокнот, мониторы с маленьким экраном? – Nitish

Поскольку вы используете проценты, да, это будет. Или, по крайней мере, он попытается поместиться он находится в середине экрана, пока экран достаточно большой. – Tikkes

Примите ответ, который был вам наиболее полезен, это побудит людей продолжать отвечать на ваши вопросы. – Tikkes

Вы говорите «#mainpage», чтобы быть 70% от высоты его родителя (body). Однако body растягивается с его содержанием.

Чтобы устранить проблему, вы должны установить высоту в body и html:

html, body { 
    height: 100% 
}

Также проверьте этот Fiddle.

источник

2013-09-02 09:09:01 LinkinTED

Отношение позиционирования CSS, не отображающее верхнее поле

ответ

Смежные вопросы