Je cette css centre div ne fonctionne pas pour IE
position:relative;
margin: 0 auto;
top:50%;
width:15px;
height:15px;
background-color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
cursor:pointer;
Son centrage fin sur le chrome et reste sur le dessus pour IE et suivants.
enlevé et changé de position:
ce qui est erroné ici?
Merci Jean
#div {
position:relative;
margin-left:-7.5px; // Half your width in negative
margin-top:-7.5px; // Half your height in negative
top:50%;
left:50%;
width:15px;
height:15px;
background-color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
cursor:pointer;
}
Cela fonctionne dans tous les navigateurs. Les rendus d'IE peuvent être horribles avec le code valide, mais ceci est une méthode éprouvée pour moi pour le fonctionnement universel.
Pour modifier cela, il vous suffit de modifier les valeurs des marges négatives pour qu'elles correspondent à la moitié de la hauteur ou de la largeur de votre élément div.
margin: 0 auto; pour le centrage horizontal devrait fonctionner correctement pour IE6 +, mais seulement tant que vous êtes en mode standard. Assurez-vous de include a Standards Mode doctype dans votre code HTML, ou vous tomberez en mode Quirks, où rien ne fonctionne correctement.
Pour savoir si une page particulière est en mode standard, entrez javascript:alert(document.compatMode) dans la barre d'adresse. CSS1Compat est bon; BackCompat est Quirks.
Pour un centrage vertical sans positionnement absolu, top: 50% n'a de sens que si l'élément parent a une hauteur explicite. Donc, si vous avez l'intention de pousser le haut à la moitié de la hauteur du navigateur, vous devrez spécifier 100% hauteur sur chaque ancêtre de l'élément, par exemple. au moins:
html, body { height: 100%; }
Essayez d'utiliser margin-top: 30%; au lieu de top:50%;
Pas besoin position:relative;.
EDIT
Pour Centrer de IE, j'utilise div-enveloppe de l'aide.
Ceci est tout mon code
<html>
<head>
<style type='text/css'>
#myDivWrapper {
text-align: center; /* x axis for ie*/
}
#myDiv {
/* set position */
margin: 0 auto; /* x axis */
margin-top: 30%; /* y axis */
/* draw div */
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id='myDivWrapper'>
<div id='myDiv'></div>
</div>
</body>
</html>
Comment se présente le html comme? Avez-vous ajouté text-align: center à l'élément parent? – baloo
Considérez ceci comme un parent – X10nD