Comment centrer horizontalement un div non-fixed width?

OK, j'ai un div qui est dans le Centré:Comment centrer horizontalement un div non-fixed width?

<div id="spry"> 
<p> hello there asdsdfasd adsfasdf aasdfasfd </p> 
</div>

Utilise ce CSS:

#spry { 
background-color: red; 
display: block; 
margin-left: auto; 
margin-right: auto; 
width: 400px; 
}

Mais je veux avoir la div pas une largeur fixe. Je pensais que je pouvais simplement changer width: 400px; Mais si vous faites cela, il se dilate sur toute la largeur.

Source

2013-08-22 Seb Silver

Vous pouvez modifier sa valeur d'affichage 'inline-block' puis utilisez' text-align: center; 'son parent récipient. – Adrift

Réponse parfaite. Postez-le comme un! – Bojangles

Je n'aime pas faire ça parce que ce n'est pas très sémantique. Im centrant un div, pas de texte. –

Vous pouvez modifier la valeur d'affichage pour inline-block puis utiliser text-align: center; sur son conteneur parent (bien car il n'a pas celui que je viens d'utiliser le <body> comme exemple):

body { 
    text-align: center; 
} 

#spry { 
    background-color: red; 
    display: inline-block; 
}

http://jsfiddle.net/3DBha/1/

Source

2013-08-22 12:03:52 Adrift

Le meilleur choix, mais j'ai vu une autre option quelque part sur SO, avait été utilisé types de position 'absolute' /' relatif' et joué avec les propriétés 'left' /' right'. Je posterai le lien si je l'ai trouvé. –

Cela ne fonctionne pas si l'utilisateur veut une largeur fixe ou max de 400px .. sinon c'est bon. – Doidgey

A en juger par le titre Je ne pense pas que ce soit ce qu'il cherche - et [cela fonctionne] (http://jsfiddle.net/3DBha/2/) si vous avez une largeur fixe – Adrift

-1

essayer margin:0 auto; voir ce qui se passe

Source

2013-08-22 11:58:49 SaturnsEye

C'est une syntaxe invalide. –

marge: 0 auto; serait la syntaxe correcte dans ce cas –

vous pouvez utiliser max-width - Ce ne dit essentiellement pas plus que 400pixels mais vous pouvez être plus petit. Essayez de redimensionner la fenêtre.

Ceci est une bonne option si vous ne voulez pas une largeur fixe. Vous pouvez également essayer un pourcentage, puis utilisez simplement max-width pour définir la largeur maximale souhaitée.

DEMO

Vous pouvez voir la largeur affichée comme vous redimensionnez juste pour démontrer

Source

2013-08-22 12:04:20 Doidgey

Comment centrer horizontalement un div non-fixed width?

Répondre

Questions connexes