Discussion :

[tom42]

Bonjour,
j'ai dans un div, une image suivit d'un texte. Je voudrais alligner ces 2 éléments par le centre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="bloc"><img src="image.jpg" title="image" alt="image" />&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

J'ai lu beaucoup de chose à ce sujet mais aucune solution ne fonctionne.(table-cell , line-height , vertical-align...)
De plus je ne connais pas d'avance la taille de l'image et la hauteur du texte.

[pop_up]

salut,

quand j'ai ces problemes d'alignement, je met l'image dans un div en specifiant la largeur de ce div en fonction de l'image et en mettant les marges en auto

exemple opur une image de 150px de large:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
DIV.img-150px{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
}

apres il te suffit de mettre ton texte entre des balises <p> et de specifier text-align:center;

ça doit marcher.

[tom42]

Oui mais moi je veux aligner le tout verticalement, en plus la taille de l'image est variable.
Je pourrais pour cela utiliser une table avec 2 cellules mais il parait que c'est mal.

[franculo_caoulene]

Salut,

Tu n'es pas obligé d'utiliser les tables pour ça. Par contre, tu peux changer le modèle du div avec la propriété display. Dans ton cas, tu peux choisir (de tête) quelque chose comme table-cell.

[tom42]

Merci pour ta réponse, j'avais dejà essayé ce display : table-cell mais je l'utilisais mal. Voila comment j'ai fait :
css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#bloc1{
    background-color : #CCCCCC;
    display : table-cell;
    vertical-align : middle;`
}
#bloc2{
    background-color : #CCCCCC;
    display : table-cell;
    vertical-align : middle;
}

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="bloc1"><img src="image.jpg" title="image" alt="image" /></div>
<div id="bloc2">&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

Et maintenant les 2 blocs sont l'un à coté de l'autre et leurs contenu est centré verticalement. (avec Safari et FF)
Mais, parce qu'il y en a toujours un, IE met les blocs l'un en dessous de l'autre

[tom42]

Bon j'ai remplacé les div par des span et maintenant ça marche.
Merci de votre aide.