Centrer plusieurs images avec marge

**M4XiMUZ** · 06/04/2007, 15h07

Bonjour à tous,

C'est le premier message que je poste ici, si problème il y a avec celui ci, n'hésitez pas à m'en faire part.

Ce que je voudrais faire? je vais montrer un exemple:
http://www.hardware.fr/html/news/cat3/page2.html

C'est le deuxième article intitulé : CeBIT : Intel P35, G33 et 45nm qui nous intéresse.

Les cartes mères sont centrées au milieu, avec une marge entre elles.
Pour les centrer j'ai utilisé le css text-align: center.
J'ai mis les 2 image dans le même bloque, c'est une erreur puisque lorsque je met les bordures , elle ne sont pas entourées individuellement mais en une seule et même image.

En mettant dans 2 bloques différents et en utilisant margin-left right ect.. les marge n'apparaissent pas.

Voici le code html:

Code html :

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

1
2
3
4
 <div class="image_centre">
<img src="http://m4ximuz.free.fr/images/v-4835.jpg" alt="cart1" /></div>
<div class="image_centre">
<img src="http://m4ximuz.free.fr/images/v-8129.jpg" alt="cart2" /></div><br />

et le css:

Code css :

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

1
2
3
4
5
6
7
8
9
10
 .image_centre
{
 
text-align: center;
margin-left:10px;
margin-bottom:10px;
border:#FF6600 solid 1px;
margin-right:10px;
 
}

donc qu'elle est la meilleurs méthode pour centrer 2, 4 ou même plus d'images et d'avoir une marge entre elles ainsi que des bordures?

La question ne semble vraiment pas compliquée, mais cela fait déjà un petit moment que je m'arrache les cheveux dessus..

Merci d'avance pour vos réponses

**blueice** · 06/04/2007, 17h54

Tu peux faire une div pour centrer le contenu et ensuite tu peux remplir avec les images, encore plus propre que le code que tu as donné :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
.centre { text-align:center; }
.centre img { margin : 0 10px 10px 10px; }
/* ]]> */
</style>
</head>
<body>
<div class="centre">
<img src="image.jpg" alt="" /><img src="image2.jpg" alt="" />
</div>
</body>
</html>

**M4XiMUZ** · 09/04/2007, 21h56

Merci beaucoup pour ce renseignement ( excusez moi pour ce retard ).

Effectivement c'est bien plus clair en faisant deux classes ( .centre et .centre img )

Bonne continuation à vous!

Centrer plusieurs images avec marge

HTML

Vue hybride

Discussions similaires

Partager

Partager