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

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

Со следующим CSS я получаю ДИВ полностью сосредоточены на левой:

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

margin: 0 auto не помогает (по-видимому, потому, что не работает вместе с position: fixed

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

источник

2012-01-05 Voo

Если элемент является фиксированной шириной (для ширины экземпляра: 400px), вы можете использовать левый и верхние атрибуты вместе с маржинальными атрибутами:

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

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

EDIT: Спасибо Ксандеру за то, что он указал на вопрос только о горизонтальном позиционировании.

источник

2012-01-05 19:28:23

+1 хотя это не должно быть - http://jsfiddle.net/VtqQD/1/ – xandercoded

@ Xander ah! очень правильно! Я обогнал себя, кажется ... EDIT: исправлено. Спасибо, что указали на это :) –

Спасибо, я обычно далеко от клиентской стороны, поэтому я уверен, что это был действительно глупый вопрос, ну, я учусь, когда я ухожу. – Voo

Вы бы просто слой ваш элемент его с:.

z-index: 9999;

Это гарантировало бы вы держать коробку на верхней (ось г), то вам просто поместите его туда, куда вы хотите х/у оси

Ссылка: Adding z-index MDN

источник

2012-01-05 19:25:31 Jakub

Я уже использую Z-indizes, чтобы убедиться, что щелчок/сенсорный событие попадает в правый элемент, но дон Посмотрите, как это помогает мне сосредоточить плавающий div? – Voo

вы определяете ширину/высоту вашего div, теперь у вас нет измерений (по крайней мере, из вашего примера) – Jakub

Используя мой javascript ниже, размер вашего div или окна не имеет значения.Он может использоваться как для фиксированных, так и для жидкостных макетов, потому что javascript находит размер окна/div после его загрузки. – user982853

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

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

источник

2012-01-05 19:26:07 user982853

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

<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>

Я надеюсь, что это поможет!

источник

2012-01-05 19:34:53

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/

источник

2012-01-05 19:37:03 Tank

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

ответ

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