web-dev-qa-db-fra.com

Centre simple un objet avec css et sans hacks

Je veux centrer un objet en utilisant CSS et sans hacks, est-ce possible et comment?

J'ai essayé cela, mais ma balise p est partie.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}
html5css3center
24
Caspert

Il y a plusieurs façons de centrer un élément. Mais cela dépend de votre élément et de la manière dont nous choisissons de l'afficher:

  • Si vous avez {display:inline; }

    C'est simple. Vous pouvez simplement utiliser "text-align: center;" pour centrer le texte, les images et les divs.

  • Si vous avez {display:block;}

    C'est un peu plus difficile. Cela dépend de la façon dont votre objet est positionné. Votre objet peut être relatif, absolu ou fixe.

    • Si c'est relatif; alors vous pouvez utiliser "margin:0 auto;", mais vous aurez besoin d’une valeur de largeur.

    • S'il est absolument positionné, vous devez spécifier vos valeurs "top:" et "left:". Vous aurez également besoin d'une largeur. Si vous connaissez la largeur de l'élément, le meilleur moyen consiste à utiliser {left:50%; margin-left:-X}, où X = 1/2 de la largeur de l'élément.

38
CharlieM

HTML:

<div>Centered</div>

CSS:

div {
    margin: 0 auto;
    width: 200px;
}

Exemple en direct: http://jsfiddle.net/v3WL5/

Notez que margin: 0 auto; n'aura d'effet que si la div a une largeur.

6
daGUY

Utilisez margin: auto comme ceci:

margin: 0px auto
1
Mikhail Vladimirov

Utilisez ceci à des fins générales. Même span ou div qui est à l'intérieur de tout:

width:inherit; display:block;margin:0 auto;
1
Sinan ÇALIŞKAN

Utilisation: 

  1. Utilisation en ligne: le contenu va Ici .... 

  2. Code CSS: 

    #text-align { text-align:center }

Code HTML :

<div id="text-align">Content goes here....</div>

http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx

0
user3152769