comment afficher un élément toujours en haut et centré?

Je me demandais pourquoi mon code suivant ne fonctionne pas:comment afficher un élément toujours en haut et centré?

EDIT: Le code suivant fonctionne dans Firefox 3.5, je ne peux pas tester sur d'autres navigateurs, ça marche partout, ou est-il des problèmes avec elle ?

<html> 
<head> 
<style type="text/css"> 
#test{ 
    position:fixed; 
    left:50%; 
} 
</style> 
</head> 
<body> 
<div id="test">Center</div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asdf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asfd<br /> 
</body> 
</html>

Il affiche toujours l'élément en haut même s'il est défilé, mais le texte: aligner: centre ne fonctionne pas du tout.

Quelqu'un at-il une idée de comment déplacer cet élément au centre de l'écran?

Merci beaucoup!

Source

2009-10-15 FurtiveFelon

Lorsque vous passez à fixed, il ne sera la position d'un élément plus remplir horizontalement comme un élément de niveau bloc normal (div, p, etc.). Sans un paramètre width spécifié, il sera seulement aussi large que nécessaire. Puisque votre bloc est seulement aussi large que le texte, changer l'alignement du texte ne changera pas l'apparence, car il est déjà à gauche et à droite, si vous obtenez ma signification ...

Une façon de vous déplacer c'est pour spécifier la largeur, cependant cela peut être problématique, puisque vous ne connaissez pas la largeur de la fenêtre du navigateur. Une façon beaucoup plus propre (qui pourrait ne pas fonctionner cross-browser, je ne suis pas sûr), est de préciser aussi le right:

position: fixed; 
left: 5px; 
right: 5px; 
text-align: center;

Cela fera le bloc remplir la fenêtre horizontalement en laissant 5px de chaque côté. L'alignement du texte devrait alors fonctionner.

Modifier: Je viens de tester et cela fonctionne dans Firefox et Internet Explorer 7. Essayez ici: http://jsbin.com/ihofa

Source

2009-10-15 04:05:28 nickf

hey, nickf, merci beaucoup pour votre réponse! Cependant, ce n'est pas idéal pour ma situation, je voudrais mettre une teinte sur le fond pour signaler que c'est un élément spécial, et avoir une largeur trop large le rendrait plutôt moche. – FurtiveFelon

margin:0px auto

ou vous pouvez utiliser Javascript/jQuery pour évaluer et centrer chaque fois que l'utilisateur redimensionne la fenêtre.

Source

2009-10-15 03:54:39 mauris

Merci beaucoup pour votre réponse! J'ai mis à jour mon post avec une page de test, je ne sais pas pourquoi cela ne fonctionne toujours pas ... – FurtiveFelon

vous aurez besoin de votre doctype pour être XHTML 1.0 Transitional. – mauris

Pour centrer non des objets texte, vous devez utiliser

margin:0px auto; display: block

Oublier display:block est un problème commun avec des objets de centrage par défaut à display:inline, comme des images.

Source

2009-10-15 04:04:33

merci beaucoup pour votre réponse! J'ai mis à jour mon message avec une page de test, et en ajoutant l'affichage: le bloc ne fonctionne toujours pas. – FurtiveFelon

Selon que votre site utilise une taille fixe en résolution ou non, la solution au problème est possible.

Si vous utilisez une taille fixe, utilisez la propriété de gauche pour le centrer puisque vous réglez la position.

Si vous développez votre site en fonction de la résolution de l'utilisateur, vous devrez utiliser javascript pour obtenir la position de l'écran. En utilisant un décalage x et y. Voici un exemple de code pour obtenir le point mort, vous devez modifier le décalage y en haut de l'écran pour obtenir l'effet que vous voulez, mais c'est un bon point de départ et je suis sûr que vous pouvez construire dessus pour obtenir ce que vous voulez .

function showdeadcenterdiv(Xwidth,Yheight,divid) { 
// First, determine how much the visitor has scrolled 

var scrolledX, scrolledY; 
if(self.pageYoffset) { 
    scrolledX = self.pageXoffset; 
    scrolledY = self.pageYoffset; 
} else if(document.documentElement && document.documentElement.scrollTop) { 
    scrolledX = document.documentElement.scrollLeft; 
    scrolledY = document.documentElement.scrollTop; 
} else if(document.body) { 
    scrolledX = document.body.scrollLeft; 
    scrolledY = document.body.scrollTop; 
} 

// Next, determine the coordinates of the center of browser's window 

var centerX, centerY; 
if(self.innerHeight) { 
    centerX = self.innerWidth; 
    centerY = self.innerHeight; 
} else if(document.documentElement && document.documentElement.clientHeight) { 
    centerX = document.documentElement.clientWidth; 
    centerY = document.documentElement.clientHeight; 
} else if(document.body) { 
    centerX = document.body.clientWidth; 
    centerY = document.body.clientHeight; 
} 

// Xwidth is the width of the div, Yheight is the height of the 
// div passed as arguments to the function: 
var leftoffset = scrolledX + (centerX - Xwidth)/2; 
var topoffset = scrolledY + (centerY - Yheight)/2; 
// The initial width and height of the div can be set in the 
// style sheet with display:none; divid is passed as an argument to // the function 
var o=document.getElementById(divid); 
var r=o.style; 
r.position='absolute'; 
r.top = topoffset + 'px'; 
r.left = leftoffset + 'px'; 
r.display = "block"; 
}

Source

2009-10-15 04:05:22 Dreamcube

.position-fixed-center { 
    position:fixed !important; 
    top: 50%; 
}

Source

2009-10-15 04:20:14 3zzy

comment afficher un élément toujours en haut et centré?

Répondre

Questions connexes