Центр сайта в центре экрана - PullRequest
Новая
       22

Центр сайта в центре экрана

1 голос
/ 17 мая 2011

Я занимаюсь разработкой сайта и хочу централизовать этот сайт в центре экрана (по горизонтали и вертикали), но не могу. Я мог центрировать его только горизонтально.

Поскольку я искал и находил решения, которые пытался применить их к своему сайту, все это искажено.

Это сайт http://amsdarquitetura.com.br/

Ответы [ 5 ]

3 голосов
/ 17 мая 2011

Это то, что вам нужно: 

<style type="text/css">

#global {
    position:absolute;
    width: 700px;
    height: 400px;
    margin-top: -200px; /* half of the height */
    margin-left: -350px; /* half of the width */
    left: 50%;
    top: 50%;

    border: 1px solid #333;
    background-color: pink;
}

</style>

Поместите это в ваш родительский div.

0 голосов
/ 17 мая 2011

Для этого есть плагин jQuery. Я вижу, вы уже используете jQuery на своей главной странице.

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/

Как вы выяснили, кажется, что варианты CSS для этого сложны, ненадежны и хакерские.

Вы можете реализовать собственную функцию jQuery, чтобы сделать то же самое. Но зачем поддерживать этот код, если проблема уже решена кем-то другим?

0 голосов
/ 17 мая 2011

Чтобы провести вас по правильному пути, попробуйте с помощью JAVASCRIPT (возможно, захотите добавить тег) определить размер окна. 

// The window.innerHeight and document.body.clientHeight will make sure it is cross-browser compatible.
function getHeight() {
    return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;
}

Затем вычтите высоту вашего основного делителя. 

var maindiv=500; //this is your total height of main div with content
var windowHeight = getHeight(); 
var displayHeight= windowHeight-maindiv;

Затем разделите на 2 (сверху / снизу) 

var topMargin= displayHeight/2;

И, наконец, добавьте 'margin-top' к главному div. 

document.getElementById('wrap').style.marginTop=topMargin;
0 голосов
/ 17 мая 2011

Вам нужно будет задать высоту и ширину для всего сайта, чтобы он был центрирован в обоих направлениях.

Оттуда, это просто математика для вашего вертикального центрирования. Горизонтальный довольно автоматический с определением ширины и поля: 0 auto; (Не используйте 5px auto.).

Вот достойная статья о вертикальном центрировании:

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

0 голосов
/ 17 мая 2011

Горизонтально легко: 

<style type="text/css">
    #wrap {
        margin: 0 auto;
        width: 800px;
    }
</style>

<body>
    <div id="wrap">
      [content]
    </div>
</body>

Вертикаль намного сложнее и, вероятно, потребует позиционирования CSS3 или javascript.

...