centrer des div...

Le
ecm.mec
Bonjour,

Je voudrais centrer comme ça vient des images sur une page, avec en
dessous de chacune d'elles, une légende.

Comment faire cela ?


************** ******************* ***********
* IMAGE1 * * IMAGE 2 * * IMG 3 *
************** ******************* ***********
blabla 1 blabla 2 bla 3


*********************** *********
* IMAGE 4 * * IMG5 *
*********************** *********
blabla 4 bla5


Merci à vous pour votre aide,

Thierry
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
O.L.
Le #22086741
ecm a écrit :
Bonjour,

Je voudrais centrer comme ça vient des images sur une page, avec en
dessous de chacune d'elles, une légende.

Comment faire cela ?


************** ******************* ***********
* IMAGE1 * * IMAGE 2 * * IMG 3 *
************** ******************* ***********
blabla 1 blabla 2 bla 3


*********************** *********
* IMAGE 4 * * IMG5 *
*********************** *********
blabla 4 bla5


Merci à vous pour votre aide,

Thierry



Je dirais bien un truc un peu comme ça :

<table alignÎnter border=0><tr><td alignÎnter>

<div style='width:100px;float:left;'><img
src=truc.gif><br>légende</div>
<div style='width:100px;float:left;'><img
src=truc.gif><br>légende</div>
<div style='width:100px;float:left;'><img
src=truc.gif><br>légende</div>
...

</td></tr></table>

Si ce sont des images de largeur variable, l'alignement risque de
merder, dans ce cas là tu peux sans doute insérer </td></tr><tr><td> à
la fin de chaque ligne d'images (entre img3 et img4 dans ton exemple).

--
Olivier Ligny
www.virgal.net (mondes virtuels 3D)
CrazyCat
Le #22086731
P-e en faisant:

<div id="main">
<div class="img_bloc">
<img src="image1><br />
legende de l'image
</div>
<div class="img_bloc">
<img src="image2><br />
legende de l'image
</div>
<div class="img_bloc">
<img src="image3><br />
legende de l'image
</div>
</div>

et la css:
#main {
text-align: center;
margin: auto;
padding:auto;
}
.img_bloc {
padding: 1em;
margin: auto;
}

Il y aura surement des ajustements à faire (p-e jouer avec du float)
mais ça devrait s'en approcher.

--
Réseau IRC Francophone: http://www.crazy-irc.net
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr
Olivier Masson
Le #22086671
CrazyCat a écrit :
P-e en faisant:

<div id="main">
<div class="img_bloc">
<img src="image1><br />
legende de l'image
</div>
<div class="img_bloc">
<img src="image2><br />
legende de l'image
</div>
<div class="img_bloc">
<img src="image3><br />
legende de l'image
</div>
</div>

et la css:
#main {
text-align: center;
margin: auto;
padding:auto;
}
.img_bloc {
padding: 1em;
margin: auto;
}

Il y aura surement des ajustements à faire (p-e jouer avec du float)
mais ça devrait s'en approcher.




Oula :) C'est le padding: auto qui fait tout ;)
Non, on ne peut centrer des photos dans un container centré.
Pour cela, il faut utiliser une table ou table-cell (ce qui revient au
même).
Il est souvent difficile de centrer sans utiliser de table si l'on ne
connait pas la largeur de l'élément.
loiseauthierry
Le #22086661
Olivier Masson
Oula :) C'est le padding: auto qui fait tout ;)
Non, on ne peut centrer des photos dans un container centré.
Pour cela, il faut utiliser une table ou table-cell (ce qui revient au
même).
Il est souvent difficile de centrer sans utiliser de table si l'on ne
connait pas la largeur de l'élément.



C'est ce que je craignais, l'usage des table

Merci pour l'info du reste,

Thierry
--
4 Calculs & Astronomie en Javascript : 3 " Il y a 10 sortes de personnes sur Terre : ceux qui connais-
2 sent le système binaire et ceux qui ne le connaissent pas "
1....'....12.....'....24.....'....36.....'....48.....'....60.....'....72
Publicité
Poster une réponse
Anonyme