besoin d'aide Centrage CSS avec positionnement absolu

Je n'ai jamais été totalement satisfait de mes différentes solutions pour centrer le contenu d'une page Web. l'étiquette <center> a été abandonnée au milieu du 18ème siècle, mais je ne vois pas d'alternative raisonnable. Plus précisément, ce que je veux, c'est avoir un DIV qui soit centré, mais contre lequel je peux placer les choses "absolument".besoin d'aide Centrage CSS avec positionnement absolu

Y at-il un moyen d'accomplir cela sans utiliser window.onresize javascript qui remesure tout? Cela semble être une idée assez simple ... Je veux que les choses soient absolument positionnées, je veux juste que la coordonnée 0,0 soit relative à quelque chose d'autre que le coin supérieur gauche de la fenêtre du navigateur.

En ce moment, je place un div pour centrer son contenu et ensuite nouer avec le positionnement relatif, mais c'est très ennuyeux parce que les objets relatifs continuent à se pousser comme je ne veux pas.

Toutes les pensées à ce sujet grandement apprécié.

Source

2009-06-23 Genia S.

Est-ce ce que vous cherchez?

<div style=" position: absolute; 
      display: inline-block; 
      top: 20%; 
      bottom: 20%; 
      right: 20%; 
      left: 20%; 
      background-color: #434154; 
      text-align: center;"> 
    <div style="display: inline-block; 
       height: 100%; 
       vertical-align: middle;"></div> 
    <div style="position: relative; 
       color: #FFFFFF; 
       background-color: #546354; 
       display: inline-block; 
       vertical-align: middle;"> 
       THIS IS CENTERED WITHOUT SCRIPTING :D 
    </div> 
</div>

Source

2013-06-22 09:51:33 chinanzio

oui, merci. En fait, je préfère cette réponse à celle que j'avais choisie. –

Vous ne voulez pas de positionnement relatif si 0,0 va être relatif à un div?

Source

2009-06-23 18:57:12 Tony

non, je veux les choses dans ce div d'avoir des endroits précis, mais si vous commencez à mettre les choses à « absolue », ils alignent contre en haut à gauche du navigateur plutôt que la div parent . –

Une bonne façon de centrer les choses est d'utiliser la balise css "margin: auto". Cela fonctionne dans FF et Safari. Donne juste une div avec une largeur et une marge automatique, et si le parent a 100% de largeur, alors ce div va s'aligner. Pour que cela fonctionne dans IE, vous devez utiliser l'attribut text-align: center sur le parent, puis aligner le texte à gauche sur le div centré réel. AFAIK, il n'y a aucun moyen de remplacer les coordonnées absolues de 0,0 par un autre point d'arbitrage. Relatif est le chemin à parcourir.

Source

2009-06-23 18:58:44 Shreyas

vous utilisez les propriétés CSS gauche, droite, supérieure et inférieure pour positionner un élément qui a un positionnement relatif ou absolu, par exemple. haut: 10px; déplace l'élément à 10 pixels du haut. – roborourke

body { text-align: center; } 
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; } 
#wrapper .child { position: absolute; left: 0; top: 0; }

Juste exemple de code, mais tout élément .child serait à 0,0 de l'emballage

Tout élément en position absolue sera la position tout à fait à sa plus proche parent de position relative. Si un élément n'a pas de parent avec une position relative, il utilise simplement le document. Voici un exemple sans classes (certains styles de couleur et de largeur ont été ajoutés pour plus de clarté).

<html> 
    <body style="text-align: center;"> 
     <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;"> 
      <div style="position: absolute; left: 0; top: 0;"> 
       This will absolutely position relative to the container div. 
      </div> 
     </div> 
     <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;"> 
      This will absolutely position relative to the document 
     </div> 
    </body> 
</html>

Source

2009-06-23 18:59:35

qui fonctionne totalement, et c'est exactement ce que je cherchais. Je suis sur un mac, atm, et tester dans FF et Safari. Cela fonctionne-t-il de la même manière dans IE (je ne me soucie pas de IE6, juste des versions plus récentes). –

juste testé dans IE ... fonctionne comme un charme. Ainsi, la clé de l'entreprise entière est d'avoir des classes qui sont définies comme appartenant à l'id de style, à savoir: # id.classname Très intéressant. –

En fait non - voir mise à jour pour plus d'explications –

peut-être je ne comprenais pas la tâche, mais je pense que vous pouvez utiliser

margin: 0 auto;

pour centrer vos divs

Source

2009-06-23 18:59:35 Roman

utiliser le positionnement relatif de la mère et donner ce même élément la propriété:

margin: 0 auto;

Le parent est maintenant positionné et vous devriez pouvoir définir des éléments lutely dedans.

Exemple:

div#page{ 
    position:relative; 
    width:400px; 
    margin:0 auto; 
} 

div#page #absoluteExample{ 
    position:absolute; 
    top:18px; 
    left:100px; 
}

Source

2009-06-23 19:11:31 moorej

Si vous coller avec position: absolute; puis définissez la div que vous voulez que les choses placées contre avoir position: relative; de le faire dans le contexte de positionnement pour les éléments enfants.

Pour centrer une div position absolue vous devez savoir sa largeur, puis utilisez le CSS suivant:

#wrapper { 
    width: 800px; 
    margin: 0 auto; 
    position: relative; /* creates a positioning context for child elements */ 
} 

#child { 
    position: absolute; 
    width: 400px; 
    left: 50%; 
    margin-left: -200px; 
}

Et le code HTML:

<div id="wrapper"> 
    <div id="child"> 
     .... 
    </div> 
</div>

Vous pouvez modifier la largeur et la marge gauche comme vous en avez besoin (la marge gauche négative doit être la moitié de la largeur de la div que vous centrez, par exemple

Comme d'autres personnes l'ont mentionné en utilisant margin: 0 auto; sur un élément avec une largeur définie dessus le centre.

Source

2009-06-23 19:12:53 roborourke

La propriété text-align: center; fait ce à quoi <center> l'habitude et il est largement supérieur.

La seule chose est, c'est un peu plus complexe à utiliser. Une fois que vous aurez compris, vous vous demanderez pourquoi vous aviez tant de problèmes avant!

Vous devez l'utiliser en coordination avec les propriétés des autres éléments de la page. C'est le problème que les développeurs/concepteurs ont avec les CSS et les nouvelles technologies HTML. Cela nous donne un moyen puissant de présenter nos éléments de page, mais le rend beaucoup plus complexe et strict.

La réponse de Mike Robinson résout certainement le problème que vous rencontrez ici et c'est un bon exemple. Mais ...

Je ne pense pas qu'une seule réponse vous montrera comment utiliser text-align correctement pour tous les cas que vous rencontrerez, mais essayez de regarder comment le positionnement dans CSS fonctionne plus en profondeur.

Source

2009-06-23 19:53:45 Travis

La meilleure façon:

#element { 

position: absolute; /*Absolute Position*/ 

top: 0; 
left: 0;   /*Set the 4 coordinates to zero*/ 
bottom: 0; 
right: 0; 

margin: auto;  /*Margin to Auto*/ 

height: 150px; /*Set the Height and Width*/ 
width:150px; 

background:green; /* Backgroung:optional*/

}

Cela apportera à droite au milieu, peu importe sa taille.

Espérons que ça aide!

Voir Fiddle: http://jsfiddle.net/kfPC6/

Source

2013-10-16 15:09:34 ErickBest

besoin d'aide Centrage CSS avec positionnement absolu

Répondre

Questions connexes