Alignement vertical en bas d'une image

**Philippe3** · 08/03/2007, 18h00

Bonjour,

J'ai remarqué en cherchant sur Google qu'il est très difficile d'aligner des éléments verticalement sans utiliser de tableaux. Il y a des trucs comme display: table-cell, mais ceux-ci ne fonctionnent pas avec IE<7. J'ai aussi trouvé des trucs pour centrer verticalement un élément avec des marges, mais ceux-ci demandent souvent que la division extérieure ait une hauteur fixe. Dans mon cas, elle a une longueur variable.

Voici le schéma de mon site. L'image qui s'y trouve est celle que je veux aligner en bas de la division qui la contient.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
 
   <div id="entete">    ...    </div>
 
   <div id="conteneur_principal>
 
      <div id="menu" style=" float: left; width: 200px; height: 100%;">
 
           <ul>
              <li>lien 1</li>
              <li>lien 2</li>
              <li>lien 3</li>
              <li>lien 4</li>
           </ul>
 
           <img id="image_que_je_veux_aligner_en_bas" src="" alt="" />
 
      </div>
 
      <div id="contenu" style=" width: 500px; height: 100%; float: left;">
 
               .................
 
      </div>
 
   </div>
 
   <div id="footer">    ...    </div>
 
</body>

**blueice** · 19/03/2007, 11h10

Code css :

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

vertical-align:bottom;

**MasterOfChakhaL** · 19/03/2007, 11h53

Salut,

La coloration syntaxique du forum met en évidence un problème de guillemet sur ton div "conteneur_principal".

Ajoute le guillemet manquant car cela peut influencer l'affichage (le document étant mal formé...)

**remaila** · 23/12/2019, 17h26

Envoyé par Philippe3

Bonjour,

J'ai remarqué en cherchant sur Google qu'il est très difficile d'aligner des éléments verticalement sans utiliser de tableaux. Il y a des trucs comme display: table-cell, mais ceux-ci ne fonctionnent pas avec IE<7. J'ai aussi trouvé des trucs pour centrer verticalement un élément avec des marges, mais ceux-ci demandent souvent que la division extérieure ait une hauteur fixe. Dans mon cas, elle a une longueur variable.

Voici le schéma de mon site. L'image qui s'y trouve est celle que je veux aligner en bas de la division qui la contient.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
 
   <div id="entete">    ...    </div>
 
   <div id="conteneur_principal>
 
      <div id="menu" style=" float: left; width: 200px; height: 100%;">
 
           <ul>
              <li>lien 1</li>
              <li>lien 2</li>
              <li>lien 3</li>
              <li>lien 4</li>
           </ul>
 
           <img id="image_que_je_veux_aligner_en_bas" src="" alt="" />
 
      </div>
 
      <div id="contenu" style=" width: 500px; height: 100%; float: left;">
 
               .................
 
      </div>
 
   </div>
 
   <div id="footer">    ...    </div>
 
</body>

**ProgElecT** · 23/12/2019, 18h26

Salut

Sans avoir essayé le code, si tu as fait un copier/coller, il manque toujours le " de fermeture de l'id dans la ligne <div id="conteneur_principal>

**Declique69** · 24/12/2019, 12h04

Il existe maintenant des techniques beaucoup plus simples que les éléments flottants ou les tableaux pour aligner des éléments.
As-tu regardé du coté des flex-box ? ou éventuellement des grilles ?

J'ai simplement déplacé l'image en dessous du <div id="menu"> et j'ai ajouté les styles ci-dessous :

Code :

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

1
2
3
4
    #conteneur_principal {display:flex;}
    #menu {flex-basis:200px;}
    #contenu {flex-basis:500px;}
    #image_que_je_veux_aligner_en_bas {align-self:flex-end;}

Invité · 24/12/2019, 12h07

Bonjour,

Merci de NE PAS déterrer des discussions datant de... 2007.

Alignement vertical en bas d'une image

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager