Image à gauche et tableau à droite

Bonjour, j'aimerai savoir si il y a une solution de base à la création :

- d'un tableau à hauteur fixe mais à ligne variable de même hauteur alignèes en haut
- ajouter à la gauche de ce tableau une image
- le tout centré verticalement et horizontalement

comme sur cette maquette par exemple

Hello,

Je pense que c'est jouable avec :
- un text-align: center sur le parent de l'image et du tableau
- un display: inline-table sur le tableau
- un vertical-align: middle sur l'image et le tableau

Bonne chance

Un big merci, si j'ai bien compris l'ordre des choses


mettre une hauteur fixe à mon tableau, et faire que les lignes soient en haut
-> un display: inline-table sur le tableau


mettre le tableau et l'image sur la même ligne
-> un text-align: center sur le parent de l'image et du tableau

centrer le tous verticalement
-> un vertical-align: middle sur l'image et le tableau


pour le dernier point, dois-je aussi le mettre sur le parent de l'image et du tableau
Modifié par kodjoed (11 Aug 2013 - 15:00)

Bonjour tous le monde alors je viens vous dire que j'ai réussi à mettre en place une image et un tableau à ça droite au milieu de ma page

seul hic :
- c'est que le vertical-align: middle; ne centre pas verticalement

- lorsque je réduit ma page le tous se sert pour rester centré, plus on réduit plus l'image et le tableau se serre, une fois que la largeur de la page ne laisse place qu'à un des deux bloc, le second va automatiquement à la ligne et se centre contrairement à l'image qui reste sur la gauche, car elle à un float:left, comment la remettre au centre automatiquement aussi malgré ce float: left ?


un grand merci
Modifié par kodjoed (13 Aug 2013 - 12:25)

salut,
il n'est pas possible de centrer un élément flottant. Tu pourrais passer par les media queries pour ça ou plus simplement ne pas utiliser de flottants (tu peux remplacer par display:inline-block/table-cell...). L'autre alternative serait de mettre un "min-width" pour imposer une largeur minimale et ne pas provoquer de retour à la ligne.
Le vertical-align se fait en fonction du "line-height" de son conteneur ou de la hauteur des éléments qui lui sont adjacents (et pas en flottants si je ne dis pas de bêtises).

juste pour le premier problème avant de passer au vertical-align

le truc c'est que je peux pas enlever le float:left, sinon l'image va au centre et le tableau juste en dessous, bien qu'avoir mit un min-width ou display:inline-block/table-cell .
Modifié par kodjoed (13 Aug 2013 - 17:12)

j'ai enfin réussi merci à vous vos conseils mon beaucoup aidé


sujet resolu