Mettre au mileu

Bonjour,

je souhaiterai mettre au milieu une image se trouvant dans un div.
J'ai essayé margin: auto et/ou vertical-aligne: middle sans succès.

Peut être l'ais-je mal manipulé.
Pouvez vous m'aider SVP?!
Modifié par thierry8 (14 Feb 2006 - 15:38)

text-align:center; 

sur ton div.

Pour le moment ça ne marche pas je suis entrain de modifier certains truc.

Mais pour savoir texte-align: center; me permet t'il de centrer mon image aussi bien horizontalement que verticalement ?

Merci de ton aide.

Pour info:

inutile personne ne la regarde

Modifié par thierry8 (15 Feb 2006 - 19:12)

Le but étant d'avoir a gauche une image avec trois petites en dessous, et un cadre à droite avec le texte.
Les images devant être centre horizontalement et verticalement en fonction de la longueur du texte.

Je réedit le post si dessus. Vous pourrez le copié/collé. il fais déjà quelque truc.
Mais verticalement je n'arrive pas a alligner les images.

Merci de votre aide.




* le forum me pose pb de temps en temps j'ai rien qui s'affiche, ou alors la lettre "e" ou "L"...

Par défaut, une image est considérée comme un caractère, au même titre que n'importe quelle lettre, espace, etc.

Du coup, text-align: center; suffit à centrer ce caractère en largeur. Pour la hauteur, j'ai un petit doute... Il faut voir du côté des vertical-align: center, mais je ne suis pas sûr de leur application (ou de leur support par les navigateurs).

Ensuite, on peut demander (en CSS) à une image de se comporter comme un bloc, au même titre qu'un paragraphe ou qu'une div.

img {display: block;}

Une fois que c'est fait, on peut utiliser les techniques de centrage pour les blocs (petite recherche google sur "centrer un bloc" ou "centrer une div" ?). Là encore, le centrage horizontal sera assez aisé, mais le centrage vertical est un casse-tête.

En règle générale, le HTML est pensé pour des documents venant s'étirer en hauteur, comme sur une page de papier à la hauteur infinie. Centrer ou même positionner verticalement un élément dans cette page de papier à bord perdu n'est pas prévu, il faut donc ruser... avec plus ou moins de bonheur (plutôt moins que plus).

Pour un centrage vertical qui marche à coup sûr, je conseille la PAO. Page de hauteur fixe et imprimante / presse.

Bonjour et merci pour ces précisions.
Cependant après plusieurs recherches et test je n'ai pas réussi.

J'arrive à un résultat plutôt satisfaisant, cependant il ne me manque plus de l'alignement vertical.

inutile personne ne la regarde

Pouriez vous m'aidez SVP.
Mille merci.
Modifié par thierry8 (15 Feb 2006 - 19:12)

Personne ne peut m'aider ???
Je tourne en rond depuis un moment...

pff les css galère quand même...

Galère, galère....C'est vite dit. Mais peut-être qu'un petit tour par la FAQ serait salutaire ? Après tout, elle est là pour ça.

J'ai déjà lu la faq, j'ai déjà cherché sur GOOGLE, j'ai déjà essayé x fois....

Si je viens ici demander de l'aide ce n'est pas pour rien.....!

Si je met la source ce n'est pas pour rien....!

Donc galère surtout que sur sujet pas beaucoup d'aide ou de cas concret !

Voila le pourquoi du comment.

"Alsa ne vous aidera pas à faire un gâteau en 5 minutes, mais en 5 minutes vous verrez que le web c'est du gâteau...ou presque"
En effet ou presque...
Modifié par thierry8 (14 Feb 2006 - 21:30)

Bonjour,

les CSS comme d'autres technologies du web et "de la vraie vie pas virtuelle" demandent un apprentissage non négligeable. Surtout quand on touche aux limites de ce qui est possible comme l'alignement vertical. C'est pas que ce soit impossible mais c'est plus complexe que la moyenne.

As-tu consulté et appliqué Comment aligner du contenu (texte ou bloc) verticalement dans un élément ? dans la FAQ?

Juste en passant, préfère du Lorem ipsum à un texte fait main et répété 10 fois. Cela évite les patterns (intraduisible, désolé) qui pourraient te faire croire qu'il y a un problème avec la mise en page du texte alors que c'est le texte qui "fait pas naturel" et la foire

Felipe

Oui j'ai lu et essayé je me répète.
Seulement je n'y arrive pas !
Je ne viens pas souvent poster inutilement, mais pour une fois que je demande, pas un coup de main.

Je ne suis pas de nature "fumiste" demandant sans avoir ni même essayé un minimum, ni même recherché.

Mais bon pas bien grave.

Si jamais vous avez un cas concret comme la source exposé, faite le moi savoir. (il suffit de copier/coller pour avoir un apperçu)
Modifié par thierry8 (14 Feb 2006 - 22:21)

Si quelqu'un pouvait m'aider concretement ça serait vraiment cooL.

Je commence à désespérer ! pff

SVP ...

merci

Thierry8,

Inutile de désespérer, il s'agit de toute façon d'un cas toujours complexe Toutefois, une réponse possible est - comme nous essayons gentiment de te le faire comprendre - dans la FAQ. Je ne dis pas que tu ne l'as pas lue, mais tu as pu passer à côté du paragraphe de fin de la section relative au centrage vertical :

a écrit :

5- Dernière solution, si toutes les autres ne conviennent pas et si la compatibilité avec IE est nécessaire : utiliser une cellule de tableau sur laquelle vertical-align fonctionnera. Eh oui, nous ne sommes pas des intégristes non-plus !

Tu verras, tu te prendras moins la tête et ton design suivra tes désirs

merci beaucoup!

En effet je l'avais lu. Mais je ne voulais pas procéder comme ça.
Je pensais qu'il y avait tout de même une autre facon de faire.

Je vais essayer cela.
Donc il s'agit bien de faire un petit tableau dans mon bloc.
Il n'y a pas d'erreur de la part ?

Je te remercie.

Je l'ai fais effectivement dans un tableau cela fonctionne.

Mais le soucis que je rencontre c'est que la hauteur est variable en fonction de la taille du texte se trouvant à droite. Et là ça ne fonctionne que lorsque j'indique une taille fixe en px, etc...

Comment puis-je faire pour que la hauteur soit répercuté par rapport à la longeur du texte.

Je donne la source des fois que vous voudriez voir et ça pourra sans doute aider quelqu'un d'autre.
(j'en suis persuadé )

inutile personne ne la regarde

Juste un petit dernier coup de pouce SVP pour cette histoire de hauteur.
Merci.
Modifié par thierry8 (15 Feb 2006 - 19:12)

Plus d'un jour pour aligner verticalement une image ! (et ce n'est pas fini)
Et bien ce n'est pas gagné !

Je comprends maintenant pourquoi les css ont du mal à rentrer dans les meurs.
AU début j'étais tout fou...mais je crois que je suis à un stade ou je rencontre les lacunes...

Si quelqu'un passe par là (des fois que..) peut-il m'aider par rapport à l'existant ou faut-il passer le tout sous forme de tableau entièrement ?
Modifié par thierry8 (15 Feb 2006 - 11:50)

J'ai fais le tout sous forme de tableau en 10secondes, mais je souhaiterai savoir si la faq sous entendait cela ?

En clair ais-je bien fais ?
Ou y a t-il une autre possibilité ?
EDIT:
(parce qu'au début je pensais qu'il fallait utiliser la cellule, donc un tableau uniquement pour l'image. cela pourrait fonctionner si la hauteur était fixe, mais ce n'est pas le cas. donc j'ai pensé qu'une deuxième cellule pour le texte permettrait de prendre la hauteur au deux....cela fonctionne, mais je ne suis pas certain de la bonne procédure...)

Si quelqu'un d'expérimenté pouvais m'aider sur ce coup.
Modifié par thierry8 (15 Feb 2006 - 12:02)

thierry8 a écrit :
J'ai fais le tout sous forme de tableau en 10secondes, mais je souhaiterai savoir si la faq sous entendait cela ?

http://forum.alsacreations.com/faq/#item3

FAQ a écrit :

Comment aligner du contenu (texte ou bloc) verticalement dans un élément ?

La mauvaise habitude est de vouloir utiliser la propriété "vertical-align".
Or Vertical align n'est pas prévu pour aligner un élément quelconque dans un bloc, mais un élément en-ligne dans un autre élément en-ligne (par exemple une image à côté d'un texte)… ou dans un élément de type table-cell (voir exemple plus bas).

1- Pour aligner un élément bloc dans un autre bloc : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
2- Pour aligner du texte (ou une balise inline) dans un bloc :
http://marcarea.com/weblog/index.php/?2004/10/18/182-10-astuces-css-correction
Source : http://evolt.org/article/rdf/17/60369/
3- Technique avec hacks et display: inline-block : http://www.brunildo.org/test/img_center.html

4- Exemple de centrage vertical avec table-cell / vertical-align (ne fonctionne pas sur IE<7) :
div {
width: 300px;
height: 200px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
}

<div>
<p>bloc centré verticalement</p>
</div>


5- Dernière solution, si toutes les autres ne conviennent pas et si la compatibilité avec IE est nécessaire : utiliser une cellule de tableau sur laquelle vertical-align fonctionnera. Eh oui, nous ne sommes pas des intégristes non-plus !

thierry8 a écrit :
Plus d'un jour pour aligner verticalement une image ! (et ce n'est pas fini)
Et bien ce n'est pas gagné !

Oui et tant que les concepteurs web vont confondre les médias, ce ne sera pas gagné.
En effet, le Web (media écran) est un média non paginé contrairement au média d'impression sur papier. Le média écran a ses propres règles, ses propres lois qui s'expliquent très facilement : un écran peut avoir différentes largeurs, et surtout le concept de "page" et de "fin de page" n'existe pas : un document web utilise un ascenseur. Il n'y a pas de notion de "hauteur de page".
Il en découle que toutes les tentatives de calculs précis de hauteur, ou d'alignement vertical sont vouées à être redoutablement compliquées... tout simplement parce que les concepteurs web essayent d'appliquer des choses non adaptées au média... alors qu'ils feraient mieux d'essayer de s'adapter eux
Modifié par Raphael (15 Feb 2006 - 12:37)

Très bien...

Donc si je comprends bien il faut laisser tomber l'alignement vertical ?
EDIT: je parle là pour le media écran...

Dans la faq il est mentionné d'utiliser une cellule...
Mais faut-il mettre l'ensemble sous forme de tableau, ou uniquement l'objet que l'on souhaite centrer ?
Modifié par thierry8 (15 Feb 2006 - 13:02)