Centrer un truc dont je ne connais pas la largeur.

Bonjour tout le monde !

Je m'intéresse depuis peu au css ... le bonheur. Et merci à ce site qui présente des tutoriels super bien foutu. Seulement j'ai un petit souci ... j'aimerai centrer un div avec contenu aligné à gauche dont je ne connais pas la largeur (contenu dynamique) ...

Pour le moment j'ai cette solution qui n'est pas terrible

<table align="center"><tr><td><div>Mon texte<br>Doit être aligné à gauche avec une largeur égal à cette ligne...</div></td><tr><table>

j'ai honte

EDIT: ouhla j'ai eu un p'tit pb
je réfléchis et reviens
Modifié par LittleBlackCat (18 Mar 2005 - 12:17)

Tiens tu peux allé voir la toutes les solutions sont envisagées : ici
A priori vu comme ca je te conseilleria de bien regardé le centrage via la technique du margin : auto.
Pour aligner le texte a gauche encadre le simplement par <blockquote> ou<p> ou les deux ! Apres dans le css tu mets la propriétés text-align : left !

Sinon encore une solution tu peux aussi contraindre la taille des images (width et height de la ppté img) . Et a se moment là tu peux utiliser les marges négativs mais je ne crois pas que ce soit ce que tu veuilles !

Edition : mon centuième post qui doit correspondre à environ un petit millier de fautes d'orthographes et de frappes
Modifié par gilles6975 (18 Mar 2005 - 19:31)

gilles6975 a écrit :

Edition : mon centuième post qui doit correspondre à environ un petit millier de fautes d'orthographes et de frappes

Oui à peu près Mais c'est pas grave
Modifié par Raphael (18 Mar 2005 - 20:56)

gilles6975 a écrit :
Pour aligner le texte a gauche encadre le simplement par <blockquote> ou<p> ou les deux ! Apres dans le css tu mets la propriétés text-align : left !

C'est quoi ce blockquote

gilles6975 a écrit :

Edition : mon centuième post qui doit correspondre à environ un petit millier de fautes d'orthographes et de frappes

Pas mieux

Merci gilles,
seulement dans ce cas cela ne fonctionne pas car on ne connais pas la largeur.
La technique des marges, margin : 0px auto ne fonctionne pas.
Et je ne peux pas utiliser les marge négative car je ne peux pas les calculer étant donné que je n'ai pas la largeur …
Ca n'est pas évident du tout j'ai l'impression.
Il faudrait utiliser un élément qui s'adapte à la largeur maximal (comme une cellule de tableau) et que l'on puisse centrer …

rikew a écrit :
Merci gilles,
seulement dans ce cas cela ne fonctionne pas car on ne connais pas la largeur.
La technique des marges, margin : 0px auto ne fonctionne pas.
Et je ne peux pas utiliser les marge négative car je ne peux pas les calculer étant donné que je n'ai pas la largeur …
Ca n'est pas évident du tout j'ai l'impression.
Il faudrait utiliser un élément qui s'adapte à la largeur maximal (comme une cellule de tableau) et que l'on puisse centrer …

Pour les margin auto il faut une largeur à exprimer par exemple en pourcentage.
En quoi le fait de pas connaitre la largeur te pose t-il un problème, si c'est du texte il occupera la largeur qu'on lui donne et continuera en dessous s'il en a besoin. J'avoue que je comprend pas ton problème, car je n'en voit pas .

Merci pour ta réponse igor.
Je m'exprime mal … désolé.
En réalité je ne souhaite pas que le texte occupe la largeur qu'on lui donne. Je souhaite qu'il occupe la largeur de la ligne de texte la plus longue …
C'est pour une question d'esthétisme.
Exemple si un utilisateur entre un texte de 3 mots et que j'indique une largeur de 350px avec un contenu aligné à gauche … le texte ne sera pas centré.
J'aimerai que quel soit le nombre de mot, le paragraphe soit centré dans la page avec un contenu aligné à gauche… et c'est pas si simple ..

et si tu mets

p{
text-align: justify;
}

ensuite tu peux jouer sur la largeur de ce paragraphe avec le padding exprimé en em

EDIT:

je viens de relire, le div que tu veux centré c'est ton div principal ou un div imbriqué dans ton principal?

par contre si tu n'as que 3 mots et que ton div ou ton paragraphe sont très large tu vas te retrouvé avec un espace impréssionant entre chaque mots.
Modifié par knarf (20 Mar 2005 - 17:17)

le paragraphe n'est pas centré.
j'ai fait ce petit schéma ... c'est plus explicite.

En fait ta div en pointillé tu peux la centrer avec les margin auto. Par contre tu ne mets pas de pointillés et tu lui donnes une largeur.
Dans ta mise en page tu utilises l'élément blockquote (block de paragraphe il me semble) que tu centres par rapport à la première div et tu lui applique les pointillés. Normalement le passage à la ligne se fait (si ca ne dépasse pas une largeur d'écran à chaque élément p).

Ce qui devrait donner

<div id="element centrer"> elle sert aussi a definir la largeur du site éventuellement
<blockquote> sert a faire les pointillé et à centrer le tout sur la page : largeur variable puisque non définie
<p>mon texte</p>
<p>encore mon texte mais ligne la plus longue</p>
<p>re texte</p>
</blockquote>
</div>

Je ne sais pas si cela résoud ton problème ?




Pour l'orthographe et les fautes de frappes il faut que je fasse attention ! Parfois je me fais peur. Mais bon j'ai une main dans le platre alors je tape du bout des doigts à droite, de la main gauche et avec la paume de la main droite (mais la c'est completement involontaire) ce qui ne facilite pas les opérations.

Euhh Gilles, blockquote, c'est pas un block de paragraphes, c'est un block de citations

Es tu sûr que c'est l'élément le plus approprié ici ?
Modifié par Olivier (20 Mar 2005 - 19:40)

Héhé c'est bien ce qui me semblait que j'utilisais cet élément sans trop me soucier de ce qu'il représentait. En même temps un texte et forcemment un ensemble de citations au moins celles de celui qui a écrit le texte. Mais effectivement sémantiquement ce n'est pas trop ca !


Pour rikew sur la capture que tu nous donnes, ton paragraphe n'est pas centré en 1024 ! Mais bon c'est une image alors ceci explique cela. L'utilisation des diverses techniques de centrage présentées sur ce site devraient te permettre de t'affranchir du problème de réolustion.

Et utiliser tout simplement un <div> à la place du blockquote.

gilles6975 a écrit :
En même temps un texte et forcemment un ensemble de citations au moins celles de celui qui a écrit le texte.

Mwéé, j'aurais tendance à penser que la majeure partie d'un site est rédigée par le créateur et non issue d'une citation quelconque

gilles6975 a écrit :
Héhé c'est bien ce qui me semblait que j'utilisais cet élément sans trop me soucier de ce qu'il représentait. En même temps un texte et forcemment un ensemble de citations au moins celles de celui qui a écrit le texte. Mais effectivement sémantiquement ce n'est pas trop ca !

Comme souvent le plus sûre est de se référer à la recommandation: Les citations : les éléments BLOCKQUOTE et Q

on s'égare

non j'ai trouvé ! et j'en suis fiere. si vous avez besoin d'aide pour vos pages n'hesitez pas

par contre ca marche que dans ie ... (donc ca marche pas du tout)

mais c'est un debut :

<style>
body { text-align: center; }
#site { margin : 0px auto; width: 600px; }
#site p { margin-right:50%; margin-left:50%; white-space: nowrap; border: 1px dashed #ff0033; padding: 5px; }
</style>

<div id="site">
<p>
Ce paragraphe est centré sur la page.<br>
Le texte est aligné à gauche.<br>
La largeur du paragraphe est égale à la longueur de la ligne la plus longue... celle-ci.<br>
</p>
</div>

Bonjour,
et comme cela, ça ne passera que dans Internet Explorer : il centre tout les éléments comme du texte, avec ton "body : text-align: center;". Pour les autres navigateurs, ils ne centreront que du texte, mais pas les blocs ou éléments que tu composes...
Il te faut donc : balise <p> qui correspond à du texte, et donc que tu alignes "left" dans son contenu. Ensuite, ce paragraphe est un bloc, que tu peux positionner tout simplement, ou lui-même à l'intérieur d'un autre bloc.
Si tu n'attribue pas une largeur (éventuellement proportionnelle) à ton bloc, je ne crois pas que tu puisses techniquement le centrer ("margin: auto")...
Voilà, les CSS font beaucoup de choses, mais pas encore tout. Ca va venir...

C'est que je pense.
Mais je me dis qu'il y avait peut être une combine ...
Comme il y a par exemple les marge négative pour le centrage vertical …
Si je trouve, je posterais ici.

Je sais pas si tu as lu cet article...