besoin d'aide centrage CSS avec positionnement absolu
https://stackoverflow.com/questions/1034449
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je n'ai jamais été totalement satisfait de mes différentes solutions pour centrer le contenu dans une page Web. la balise <center> a été déconseillée au milieu du XVIIIe siècle, mais je ne vois pas d’alternative raisonnable. Plus précisément, ce que je veux, c’est que le parent parent soit centré, mais contre le coin supérieur gauche duquel je puisse placer les éléments & "Absolument &";
Existe-t-il un moyen de réaliser cela sans utiliser window.onresize javascript qui remare tout? Cela semble être une idée plutôt simple. Je veux que les choses soient positionnées de manière absolue. Je veux simplement que la coordonnée 0,0 soit relative à autre chose que le coin supérieur gauche de la fenêtre du navigateur.
Pour le moment, je règle une div pour centrer son contenu, puis un positionnement relatif, mais c'est très fastidieux, car les objets relatifs ne cessent de se bousculer d'une manière que je ne souhaite absolument pas.
Toutes les réflexions sur ce sujet ont été grandement appréciées.
La solution
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>
Autres conseils
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
Juste un exemple de code, mais n'importe quel élément .child serait à 0,0 du wrapper
Tout élément positionné de façon absolue se positionnera absolument sur son parent le plus proche. Si un élément n'a pas de parent avec une position relative, il utilise simplement le document. Vous trouverez ci-dessous 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>
Si vous vous en tenez à position: absolute;, définissez la division contre laquelle vous souhaitez que les éléments positionnés soient position: relative; intégrés dans le contexte de positionnement de tout élément enfant.
Pour centrer une div en position absolue, vous devez connaître 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 HTML:
<div id="wrapper">
<div id="child">
....
</div>
</div>
Vous pouvez modifier la largeur et la marge de gauche selon vos besoins (la marge de gauche négative doit correspondre à la moitié de la largeur de la div que vous centrez, par exemple. #child.
Comme d'autres personnes l'ont mentionné, utiliser margin: 0 auto; sur un élément avec une largeur définie le centrerait.
Pour bien centrer les choses, utiliser la " marge: auto " balise css. Cela fonctionne dans FF et Safari. Il suffit de donner à la div une largeur et une marge auto, et si le parent a une largeur de 100%, cette div s'alignera au centre.
Pour que cela fonctionne dans IE, vous devez utiliser l'attribut text-align: center sur le parent, puis text-align left sur le div centré actuel.
Si je comprends bien, il n’existe aucun moyen de modifier les coordonnées absolues de 0,0 à un autre point arbitraire. Le relatif est la voie à suivre.peut-être que je n'ai pas compris la tâche, mais je pense que vous pouvez utiliser
margin: 0 auto;
pour centrer vos divs
Utilisez le positionnement relatif sur le parent et donnez à ce même élément la propriété:
margin: 0 auto;
Le parent est maintenant positionné et vous devriez pouvoir y placer absolument des éléments.
Exemple:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
Le moyen le plus simple:
#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 l'amènera au milieu, peu importe sa taille.
J'espère que ça aide!
Voir Fiddle: http://jsfiddle.net/kfPC6/
Ne voulez-vous pas d'un positionnement relatif si 0,0 doit être relatif à un div?
La propriété text-align: center; fait ce à quoi <center> l'habitude et elle lui est largement supérieure.
Le problème, c’est un peu plus complexe à utiliser. Une fois que vous aurez compris, vous vous demanderez pourquoi vous aviez tant de problèmes auparavant!
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 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 excellent exemple. Mais ...
Je ne pense pas qu'une seule réponse vous montrera comment utiliser text-align correctement dans tous les cas que vous rencontrez, mais essayez de regarder comment le positionnement dans CSS fonctionne plus en profondeur.
