centre alignant un div position fixe

Question

centre alignant un div position fixe

Demandé el 18 de Mai, 2010: Quand la question a-t-elle été
53592 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Je vais essayer d'obtenir un div qui a position:fixed centre aligné sur ma page.

J'ai toujours été en mesure de le faire avec des divs en position absolue à l'aide de ce "hack"

left: 50%; width: 400px; margin-left:-200px

...où la valeur de la marge gauche est la moitié de la largeur de la div.

Cela ne semble pas fonctionner pour position fixe de la vrd, au lieu de cela il seulement des lieux avec leurs plus à gauche coin à 50% et ignore la marge gauche de la déclaration.

Une idée de comment résoudre ce problème afin que je puisse le centre d'aligner fixe les éléments en position?

Et je vais jeter un bonus de M&M si vous pouvez me dire une meilleure façon de centre d'aligner les éléments en position absolue de la façon dont je l'ai décrit ci-dessus.

Demandé el 18 de Mai, 2010 par Kyle

Answer 1

5 Réponses

Answer 2

272voto

emzero Points 1152

La réponse de Koen ne centre pas exactement l'élément.

La méthode appropriée consiste à utiliser la propriété CCS3 transform . Bien que ce ne soit pas supporté par certains anciens navigateurs . Et nous n’avons même pas besoin de définir un width fixe ou relatif.

 .centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Travailler jsfiddle comparaison ici .

Répondu el 18 de Septembre, 2014 par emzero (1152 Points )

Answer 3

170voto

Koen Points 666

Pour ceux qui ont le même problème mais avec un design réactif. Vous pouvez aussi utiliser:

 width: 75%;position: fixed;left: 50%;margin: 0 0 0 -37.5%;

Cela gardera toujours votre div fixe centré sur l'écran même avec un design réactif.

Répondu el 17 de Mai, 2012 par Koen (666 Points )

Answer 4

52voto

Andrew G.H. Points 1009

Une bonne façon de centre d'un "fixe" élément serait de faire un "centre" de l'élément fixe, et avec 100% de largeur, et tout ce qu'il sera dans le centre de la largeur 100% "centre".

Le css serait:

#center{
    position:fixed;
    width: 100%; //this basically stretches all over the window as fixed
}

Le html serait:

<html><head></head>
<body>
    <center id='center'>
        ...elements
    </center>
</body></html>

La même méthode peut être appliquée à positionnement absolu des éléments.

Mise à JOUR: Et pour les sceptiques qui pensent que de centre de balise comme étant obsolète, il peut être remplacé par un wrapper de la div qui a align="center" bien appliquée. Vous pourriez même avoir aligner supprimé et pourrait utiliser text-align:center.

Répondu el 13 de Avril, 2012 par Andrew G.H. (1009 Points )

Answer 5

36voto

Bhimbim Points 391

De la poste ci-dessus, je pense que la meilleure façon est

Ayant div div avec widht 100%
À l'intérieur de la division, création d'une nouvelle division ou table statique avec margin-left:auto , margin-right:auto , ou pour la table la centrer.
Tadaaaah, vous avez centré votre div fixe maintenant

J'espère que cela aidera.

Répondu el 17 de Mai, 2012 par Bhimbim (391 Points )

Answer 6

7voto

Kevin Points 23

Normal divs doit utiliser margin-left: auto et margin-right auto, mais cela ne fonctionne pas pour les divs. Le moyen de contourner cela est similaire à Andrew de réponse, mais n'utilise pas le obsolète chose. Fondamentalement, il suffit de donner le fixe div wrapper.

Html:

<div id="wrapper">
    <div id="fixed_div"></div>
</div

Css:

#wrapper {
    width: 100%;
    position: fixed;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    text-align: center;
}

Ce sera un centre fixe div dans une div, tout en permettant à la div pour réagir avec le navigateur, c'est à dire la div sera centré si il y a assez d'espace, mais colide avec le bord du navigateur autrement; de la même façon régulière centrée div réagit.

Répondu el 15 de Avril, 2014 par Kevin (23 Points )

centre alignant un div position fixe

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

centre alignant un div position fixe

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: