Je veux centrer un div au milieu de ma page, et faire en sorte que le div corresponde au contenu. Comment puis je faire ça?Centre div et ajuster le contenu?
J'ai essayé
width: 1px;
white-space: nowrap;
margin: 0 auto;
Quels sont les centres de la div, mais tout le texte est à droite de cela.
display: inline-block fait la div adapter au contenu, mais margin: 0 auto; ne semble pas fonctionner ...
Est-ce que ce travail pour vous: http://vidasp.net/tinydemos/inline-centered-div.html
body { text-align:center; }
div { display:inline-block; }
Cela rend tout centré sur la page. – Blindy
@Blindy C'est juste une démo. Sur la page, l'OP doit définir text-align: center sur l'élément parent de DIV (qui ne sera pas l'élément BODY dans son cas). –
Oui, oui c'est le cas. Bien que je vais l'envelopper dans un div supplémentaire et mettre le 'texte-align: center' sur cela à la place, et puis je dois juste mettre' text-align: left' sur le div interne. – mpen
Le texte est à droite en raison de la largeur: 1px. Définir une plus grande largeur.
... oui, je comprends * pourquoi *, mais "définir une plus grande largeur" ne répond pas à l'exigence "contenu de l'ajustement". – mpen
La seule façon de le faire, javascript solutions mises à part, est de lui donner une largeur et définir ses marges gauche et droite à l'auto:
<div style="margin-left:auto;margin-right:auto;width=80%">...</div>
Toutes les autres solutions gâchera votre texte intérieur.
Je veux ajuster le contenu, pas un% de largeur. – mpen
En règle générale, si vous voulez centrer un texte, vous utiliser un récipient qui enjambe le récipient dans lequel vous définissez le centrage et text-align: center;.
CSS:
#container {
text-align: center;
}
HTML: mon texte
Si vous voulez un conteneur qui est de taille autour du texte, à des fins d'un fond de couleur ou de bordure, bâton dans un autre récipient intérieur.
CSS:
#container {
text-align: center;
}
#inner_div {
display: inline;
/*other styles here*/
}
HTML:
<div id="container">
<div id="inner_div">my text</div>
</div>
Essayez display: table;
div {
display: table;
margin: 0 auto;
}
Eh bien, si vous le faites 'inline-block' alors vous devez définir' text-align : centre' sur son parent pour le centrer ... –
@Sime: Je devrais avoir posté ceci comme réponse .... Je vous donnerais la coche. Edit: Oh..you did;) – mpen