центр плавающий div горизонтально - PullRequest
Новая
       0

центр плавающий div горизонтально

2 голосов
/ 05 января 2012

Мне нужен горизонтально "центрированный" плавающий "div, то есть тот, который всегда находится в верхней части экрана, даже если пользователь прокручивает вокруг.

С помощью следующего CSS я получаю div по центру слева: 

#guiBar {
margin-left: auto;
margin-right: auto;
position: fixed;
}

margin: 0 auto тоже не помогает (возможно потому, что это не работает вместе с position: fixed?

Меня не волнует, как работает решение, так что javascript или какой-то трюк с html5 будут так же хороши, как чистый css. Я уже пробовал решение, найденное здесь от starx , но это также, похоже, не работает с position: fixed. есть также этот , который тоже не работает (т.е. он центрирован слева - не уверен, что число <input class="guiButton" type="image" src="/icons/some.png" /> имеет фиксированный размер по его определению.)

Ответы [ 5 ]

10 голосов
/ 05 января 2012

Если ваш элемент имеет фиксированную ширину (например, width: 400px), вы можете использовать атрибуты left и top вместе с атрибутами margin: 

#guiBar
{
    position:fixed;
    left:50%;
    margin-left:-200px; /*half the width*/
}

Демо: http://jsfiddle.net/VtqQD/1/show
Источник: http://jsfiddle.net/VtqQD/1

РЕДАКТИРОВАТЬ: Спасибо Ксандер за указание на вопрос был только о горизонтальном позиционировании.

2 голосов
/ 05 января 2012

HTML 

<div id="subject">
    <div id="predicate">
    Read Me!
    </div> 
</div>

CSS 

#subject {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

#predicate {
    position:relative;
    top:50%;
    margin:-20px auto auto auto; /*half of height*/
    width:140px;
    height:40px;
    background:#b4da55;
}

попробуйте http://jsfiddle.net/RfRAb/

1 голос
/ 05 января 2012

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

Если вы хотите, чтобы центр всего экрана / окна использовал window.innerHeight и window.innerWidth, разделите на два и сместитеваш див.

0 голосов
/ 05 января 2012

Я сделал крошечный пример: 

<html>
<head>
    <style type="text/css">
        body { margin: 0; }
        #wrapper { width: 500px; margin: 0 auto; } 
        #top { margin: 0 auto; width: inherit; background: red; position: fixed; }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="top">
        foo
    </div>
</div>
</body>
</html>

Надеюсь, это поможет вам!

0 голосов
/ 05 января 2012

Вы бы просто наложили слой на элемент: 

  z-index: 9999;

Это гарантирует, что вы будете держать прямоугольник сверху (ось z), а затем просто расположите его там, где хотите ось x / y

Ссылка: Добавление z-индекса MDN

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

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

...