Astuces de centrage CSS [fermé]

StackOverflow https://stackoverflow.com/questions/148251

Question

Mon équation préférée pour centrer un élément xhtml à l'aide de CSS uniquement est la suivante: 

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

Il existe également une méthode plus simple: margin: auto dans les navigateurs qui la prennent en charge. Quelqu'un d'autre dispose-t-il de moyens astucieux pour forcer l'affichage du contenu centré dans son conteneur? (points bonus pour le centrage vertical)

edit - oops, j'ai oublié la partie "négative" de l'un dans la marge gauche. fixe.

Était-ce utile?

La solution

Stick avec Marge: 0 auto; pour alignement horizontal; Si vous avez également besoin d'un alignement vertical, utilisez position: absolute; en haut: 50%; marge supérieure: - (largeur / 2) px; Sachez cependant que si votre conteneur a plus de largeur que votre écran, une partie de celui-ci tombera de l’écran sur le côté gauche en utilisant la méthode Position: absolute.

Autres conseils

div #centered{
 margin: 0 auto;
}

semble être le plus fiable de mon expérience.

Eh bien, cela ressemble à une surdose massive, je dois le dire. J'ai tendance à définir le conteneur sur text-align: center; pour les anciens navigateurs, margin: auto; pour les navigateurs modernes, et le laisser comme ça. Puis réinitialisez text-align dans l'élément (s'il contient du texte).

Bien sûr, certaines choses doivent être définies en tant que bloc, et les largeurs doivent être définies ... Mais comment essayez-vous de créer un style qui a besoin de beaucoup de choses? ? 

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Marge: auto fonctionne dans tous les navigateurs tant que vous assurez que IE est en mode standard.

Il est plus pointilleux que les autres et nécessite que votre type de document soit le tout premier dans votre document, ce qui signifie qu'aucun espace (espace, tabulation ou saut de ligne) ne le précédera.

Si vous faites cela, margin: auto est la voie à suivre! :)

juste une note que la marge: auto; Cette méthode ne fonctionne que si le navigateur peut calculer la largeur de l'élément à centrer et la largeur du conteneur parent. dans de nombreux cas, réglage de la largeur: auto; fonctionne, mais dans certains cas, cela ne fonctionne pas.

Ceci est un favori pour les astuces CSS

http://css-discuss.incutio.com/

Contient des lots de centrer des astuces aussi.

Le positionnement absolu avec une approche à 50% a l’inconvénient majeur que si la fenêtre du navigateur est plus étroite, un élément du contenu apparaît alors dans la partie gauche du navigateur - sans possibilité de le faire défiler.

Respectez les marges automatiques: elles sont beaucoup plus fiables.

Si vous travaillez en mode standard (ce que vous devriez être), ils sont pris en charge par tous les navigateurs qui vous intéressent probablement.

Vous pouvez utiliser le hack text-align si vous avez vraiment besoin de supporter Internet Explorer 5.5 et versions antérieures. 

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Cela fonctionne bien dans tous les navigateurs habituels. Comme déjà mentionné, margin: 0 auto; ne fonctionnera pas dans toutes les versions semi-actuelles d'IE.

Essayez ceci; Je ne sais pas si cela fonctionne dans IE, fonctionne bien dans Fx cependant. Il centre un bloc DIV sur la page en utilisant uniquement du CSS (pas de JavaScript), pas de marge automatique et le texte dans le bloc DIV est toujours aligné à gauche. J'essaie simplement de savoir si le centrage vertical pourrait également fonctionner de cette manière, mais sans succès jusqu'à présent. 

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top