centre flottant div horizontalement

Je veux un div "flottant" horizontalement centré, c'est-à-dire qui est toujours en haut de l'écran même si l'utilisateur fait défiler.centre flottant div horizontalement

Avec le CSS suivant que je reçois la div complètement centrée sur la gauche:

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

margin: 0 auto ne contribue pas non plus (probablement parce que cela ne fonctionne pas avec position: fixed

Je ne Je m'inquiète vraiment comment la solution fonctionne si javascript ou une tricherie html5 serait aussi fine que css pure.J'ai déjà essayé la solution trouvée here from starx mais cela ne semble pas non plus fonctionner avec la position: fixe.il y a aussi this qui ne travailler soit (c'est à dire qu'il est centré à gauche - pas sûr que je fa nombre de <input class="guiButton" type="image" src="/icons/some.png" /> ont une taille fixe par sa définition)

Source

2012-01-05 Voo

Si votre élément est une largeur fixe (pour une largeur d'exemple: 400px) vous pouvez utiliser la gauche et en haut des attributs ainsi que les attributs de marge:

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

Demo: http://jsfiddle.net/VtqQD/1/show
Source: http://jsfiddle.net/VtqQD/1

EDIT: Merci à Alex d'avoir signalé que la question portait uniquement sur le positionnement horizontal.

Source

2012-01-05 19:28:23

+1 mais ne devrait pas être cela - http://jsfiddle.net/VtqQD/1/ – xandercoded

@Xander ah! très correct! Je me suis devancé il me semble ... EDIT: fixe. Merci de l'avoir signalé :) –

Merci, je suis généralement loin du côté client, donc je suis sûr que c'était une question vraiment stupide, eh bien j'apprends comme je vais. – Voo

Vous simplement la couche de votre élément avec:.

z-index: 9999;

Cela vous restiez la boîte sur le dessus (axe z), alors que vous venez la position où vous voulez x/axe y

Référence: Adding z-index MDN

Source

2012-01-05 19:25:31 Jakub

J'utilise déjà z indizes pour vous assurer un clic/événement tactile arrive à l'élément à droite, mais je ne ne vois pas comment cela m'aide à centrer la div flottante? – Voo

vous définissez une largeur/hauteur à votre div, dès maintenant vous n'avez pas de dimensions (au moins de votre exemple) – Jakub

En utilisant mon javascript ci-dessous, il n'a pas d'importance la taille de vos divs ou une fenêtre.Il peut être utilisé à la fois pour les mises en page fixes et fluides car javascript trouve la taille de la fenêtre/div après chargement. – user982853

vous pouvez utiliser l'utilisation javascript utilisation scrollHieght et scrollWidth pour trouver la hauteur et la largeur div parent. Puis utilisé ces valeurs divisées par deux pour obtenir les valeurs du centre de la div. Puis le compenser par les dimensions de la div que vous souhaitez placer sur le dessus.

Si vous voulez que le centre de l'ensemble de l'écran/fenêtre utilise window.innerHeight et window.innerWidth, divisez-les par deux et décalez-les par votre div.

Source

2012-01-05 19:26:07 user982853

J'ai fait un petit exemple:

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

J'espère que cela vous aidera!

Source

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

essayer http://jsfiddle.net/RfRAb/

Source

2012-01-05 19:37:03 Tank

centre flottant div horizontalement

Répondre

Questions connexes