Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

Placer une image en bas d'un bloc en css

Posté par : Neg le : 2010-07-09 10:22:47



Comment faire pour aligner une image en bas d'un div en css ? Voici une petite astuce qui permet de le faire simplement.

Elle peut servir dans le cas d'une galerie d'image par exemple, dans laquelle chaque image n'as pas le même format. Par défaut les images vont s'aligner à partir du haut de l'élément dans lequel elle se situe, ce qui n'est pas forcément jolie. Dans notre cas nous voulons qu'elle s'aligne à partir du bas.

le résultat Image alignées en bas d'un div


voici les quelques ligne permettant de mettre en place cela, le code html très simple :


<div id="conteneur">
<div class="bloc">
<img src="imagebloc_1.jpg" />
</div>

<div class="bloc">
<img src="imagebloc_2.jpg" />
</div>
<div class="bloc">

<img src="imagebloc_3.jpg" />
</div>
<div class="bloc">
<img src="imagebloc_4.jpg" />

</div>
<div class="bloc">
<img src="imagebloc_5.jpg" />
</div>
<div class="bloc">

<img src="imagebloc_6.jpg" />
</div>
<div class="spacer"> </div>
</div>


au seins d'un conteneur (facultatif) on met donc nos x images dans un bloc. le div "spacer" sert seulement à étendre le conteneur le long de nos élément "bloc" qui vont être flottants.

Le code css pour que tout s'aligne comme sur l'image :


Le conteneur pour centrer nos éléments dans une taille donnée (facultatif)
#conteneur
{
width:800px;
padding:10px;
border:1px solid #000000;
margin-left:auto;
margin-right:auto;
}
.bloc
{
float:left;les éléments sont flottants
margin:5px;
height:200px;avec une hauteur fixe
line-height:200px;cette ligne permet d'aligner les image en bas (taille de la hauteur de l'élément)
border:1px solid #ff0000;
}
on indique que les images des blocs "bloc" doivent s'aligner sur le bas
.bloc img
{
vertical-align:bottom;
}
permet de donner la bonne hauteur à l'élément conteneur (facultatif)
.spacer
{
clear:both;
}


Voila c'est fait, notre galerie est à présent plus agréable à voir.

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=249&titre=Placer-une-image-en-bas-d'un-bloc-en-css
tags : css (12), développement (3), positionnement (1), div (1), bloc (1), image (1),


J'aime, 7 personnes aiment çaCommentaire(s)(0)


Ajouter un commentaire :






Les derniers articles :
Fonctionnement d'un site web dynamique
Placer une image en bas d'un bloc en css
Reconnaisance automatique des visages, la démocratisation.
Vers un retour de baton pour Google en Chine ?
chat-land.org : l'installation perverse de cherche.us
Si ! La coupe du monde a du bon
Un câble en fibre optique entre la France et l'Afrique du sud
Une page web avec édition instantanée
La politique de l'iceberg
Internet explorer 6 sous la barre des 5% d'utilisateurs

propulsé par Neg