Centrer 2 images et un div sur une ligne

**stdonat** · 19/01/2013, 12h57

Bonjour.
Mettre un titre parleur n'est pas frorcement la chose la plus simple...et je n'ai pas beaucoup de connaissance en CCS...
Voilà mon probléme, du moins ce que je souhaiterai faire!
Aligner sur une meme ligne et répartie de façon uniforme:
Une image (avec un lien hypertexte), un Div (dans lequel avec du Js je fais défilé des images) et une autre image (avec également un lien hypertexte).
Pour le moment J'arrive a alligner 3 images mais pour cela j'utilise margin-right: auto; et margin-left: auto; mais ça ne marche pas avec IE.

Merci pour vos lumiéres

**Muchos** · 19/01/2013, 13h53

Montrez-nous votre code ou la page en question, car vous avez l'air de faire un peu n'importe quoi ^^

Pour info, vous pouvez aligner ce genre d'élément avec la propriété FLOAT.

**stdonat** · 19/01/2013, 13h57

Vous avez surement raison... ci dessous:

Code :

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
31
32
33
34
35
36
37
38
39
40
<style type="text/css">
.image
	{
	float: left;
	border: 1px solid #000000;
	text-align: center;
	height: 150px;
	width: 150px;
	margin-left: 25px;
	margin-top:1px;
	}
.image2
	{
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #000000;
	height: 150px;
	width: 150px;
	margin-top:1px;
	}
.image3
	{
	float: right; 
	margin-right: 25px;
	margin-top:-168px;
	border: 1px solid #000000;
	height: 150px;
	width: 150px;
	}
}
</style>
</head>
 
<body>
 
<p class="image"><a href="lien1"><img src="../Img1.jpg" ></a></p>
<p class="image2" align="center"><a href="lien2"><img src="../Img2.jpg" ></a></p>
<p class="image3"><a href="lien1"><img src="../Img3.jpg" ></a></p>
 
</body>

Merci

**Muchos** · 19/01/2013, 14h33

Votre code ne ressemble pas beaucoup à ce que vous vouliez faire…
Néanmoins, je me permets des corrections et des suggestions. Ici, FLOAT ne correspond pas vraiment à votre problème, alors j'ai utilisé INLINE-BLOCK:

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Mes images alignées</title>
	<style type="text/css">
.bandeau {
text-align: center;
}
.image
{
display: inline-block; /* des blocs en ligne ;) Permet l'alignement horizontal */
width: 150px;
height: 150px;
border: 1px solid #000;
margin: 1px 25px;
line-height: 150px; /* technique possible pour aligner verticalement */
}
        </style>
</head>
<body>
<div class="bandeau">
	<a class="image" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
	<a class="image" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
	<a class="image" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
</div>
</body>
</html>

**stdonat** · 19/01/2013, 15h15

Merci c'est superbe mais pourquoi en rajoutant

Code :

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

.bandeau {text-align: center;height:150;overflow:hidden;}

mes images continuent à s'afficher les unes au dessus des autres lorsque la largeur de la fenêtre diminue ?

**Muchos** · 20/01/2013, 02h36

C'est le comportement normal : avec 3 éléments de 200 px sur la même ligne (sans margin-padding-border), si la fenêtre fait moins de 600 px, les boîtes se déplacent vers là où il y a de la place

NOTA: height:150 ne veut rien dire. Il faut donner une unité.

Centrer 2 images et un div sur une ligne

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager