Centrer une image et un texte dans une cellule

Bonjour

voila je voudrais que mon image soit centrer dans la cellule

http://www.lemondedegaya.fr/collection2.php

Code:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
 
 
.texte2{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 16px;
	text-decoration: none;
	text-indent:30px;
	text-align: center;
	position:relative;
	top: 70px;
	left: 220px;
	width: 739px;
	overflow: auto;
	margin: 0 0 10px 0;
	}
 
body {
	background-color: #f7d8fc;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
	font-style: italic;
}
 
img {
	border:0;
	vertical-align:middle;
}
 
a {
	color: #781d89;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
} 
 
a:hover {
    color: #e365f6;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
}
 
#unite {
	position:absolute;
	left:50%;
	margin-left:-490px;
	width: 980px;
	top:50%;
	margin-top:-271px;
	height: 542px;
	background-image : url("images/fond_page.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
}
 
#titre{
    color: #b04cbf;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 36px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 5px;
	left : 205px;
}
 
#texte{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 65px;
	left: 585px;
 
 
}
 
 
 
#menubas {
	 margin-top: 108px;
	 float:right;
	 padding-right: 5px;
}
 
.texte2
{
font-size: 15px;
 
font-weight: bold;
}
 
a.margetitre{
font-size: 15px;
text-decoration: none ;
font-weight: bold;
}
 
a.margetitre:hover{
font-size: 15px;
text-decoration: none ;
font-weight: bold;
}
 
#titrecontenu {
font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
height:10px;
 
}
 
#bandeau {
position: relative;
	width:757px;
	height:25px;
 
	top: 153px;
	left:220px;
color: #7890d2;
text-align:left;
text-decoration: underline ;
font-size: 15px;
 
font-weight: bold;
	}
#menu {
position: relative;
	float:left;
	width:208px;
	height:283px;
	top: 210px;
	left: 5px;
	text-align: center;
	}
#contenu {
position: relative;
	float:left;
	width:757px;
	height:365px;
	top:30px;
	left:12px;
	overflow: auto;
	font-size: 12px;
	font-weight: bold;
	}
 
	td, table{
	vertical-align:top;
	line-height:12px;
	}
 
	.gallerie .image {
  float: left;
  margin-left: 15px;
  margin-bottom: 15px;
   text-align: center;
   color:red; /* ta couleur */;
 
}
 
 
.gallerie .image img {
float: left;
margin-left: 15px;
  margin-bottom: 15px;
   text-align: center;
   color:red; /* ta couleur */;
}
 
 
	.gallerie2 .image {
  float: left;
  margin-left: 100px;
  margin-bottom: 70px;
   text-align: middle;
 
 
}
.format{
  float: left;
  margin-left: 20px;
  margin-bottom: 30px;
  font-weight: bold;
 
}
 
.clear {
  clear: both;
}
 
#bandeau {
position: relative;
}
 
.choix {
color: #7890d2;
text-align:left;
text-decoration: underline ;
font-size: 15px;
 
font-weight: bold;
	}

Code:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>le monde de gaya et ses faire part</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="Description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ...">
	<meta name="keywords" content="faire, part, parts, faire-parts, faireparts, faire part, fairepart, mariage, deuil, deces, remerciement, union, naissance, fete, bebe, marie, ligne, en-ligne, online, original, artisanal, bapteme, papier, rare, unique, maries, creation, main, qualite, travail, soigne, soin, passion, invite, invitation, jubile, menu, remerciement, livre d'or" /><meta name="Robots" content="All">
<meta name="author" content="Thaon Sandrine">
<meta name="revisit-after" content="5 days">
 
<base href="http://www.lemondedegaya.fr">
		<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
	    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="page.css" />
		 <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie2.css" />
      <![endif]-->
 
</head>
 
   <body>
 
 
       <div id="unite">      
 
<div id="titre">   
 
 Le monde de Gaya
 
 </div>  
 <div id="texte">   
 
 Faire-part de mariage originaux et  personnalisés.   <br>
 
 </div>  
 
           <div id="menubas">
          <?php
include("menu.php");
?> 
 
           </div>
           <div>
 
 
 
 
 
 
 
					<div id="bandeau">La collection faire-part mariage</div>
	<div id="menu">
	<br><br>
	<a href="collection.php"class="margetitre">La collection</a><br><br>
	<a href="format.php"class="margetitre">Les formats</a><br><br>
	<a href="papiers.php"class="margetitre">Les papiers</a><br><br>
	<a href="textes.php" class="margetitre">Idées de textes</a><br><br>
	<a href="conditions.php" class="margetitre">Conditions de ventes</a>
 
 
	</div>
	<div id="contenu">
 
	<div class="gallerie">
 
 
				<div id="contenu" align="center">
					<table border="0" width="700">
							<tr>
 
							<td align="center" style="vertical-align: middle" height="108"><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a><br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							<td align="center" style="vertical-align: middle" height="108"><a href="faire-part-photos-sepia.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br><a href="faire-part-photos-sepia.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" height="108"><a href="faire-part-coeur-argent.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-coeur-argent.htm">La branche</a><br>
							A partir de 1.95 euros<br>
&nbsp;</td>
 
							<td align="center" style="vertical-align: middle" height="108"><a href="faire-part-cygne.htm"><img border="0" src="images/comme_site_devant_petite.jpg" width="120" height="100"></a><br>
							<a href="faire-part-cygne.htm">La branche</a>s<br>
							A partir de 1.95 euros
							<br>
&nbsp;</td>
							</tr>
 
 
 
	<div class="clear"></div>
 
	</div>
 
 
 
 
			</div>		
 
 
 
       </div>        
   </body>
</html>

merci d'avance

Bonjour,

Sans vouloir te décourager, je remarque une méconnaissance de plusieurs bases CSS ...
Je t'invite à jeter un coup d'œil sur ce tuto, il te sera sans doute utile si tu comptes revoir ton code.

Pour ton problème, un height:100% sur le tableau produit le comportement souhaité.

justement c'est de la que je suis parti, de se tut

je dois le mettre ou se 100%

Code:

1
2
 
<table width="700" height="100%" border="0">

ca marche pas c'est pire même

http://www.lemondedegaya.fr/collection2.php

Quand tu dis :

Citation:

comment centrer une image et un texte dans une cellule

Je pense directement au centrage verticale, alors pourrais tu faire un effort et détailler ta demande STP ?

voila mon but est de faire la même chose que ca

http://www.fairepartpourmariage.com/...t-mariage.html

tu vois tu as une image et son texte juste en dessous

Tu vois se que je veux dire

Citation:

Envoyé par gaya102

Tu vois se que je veux dire

Oui je vois :)

Enlève le display:block; sur IMG (menu.css ligne 5 :)) et le height="100" sur le tableau si tu veux.

je me sens stupide mais j'ai ca ligne 5

" font-family: Comic Sans MS, Times New Roman, Times, serif;"

et je ne trouve pas le "display:block;"

désolé

http://www.lemondedegaya.fr/menu.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}

:aie:

j'avais pas regarder dans se css la lol

bon ca marche lol mais j'ai une image avec un texte qui se promenne tout seul

Parce que tu n'as pas de vertical-align:middle; comme les autres cellules.

merci c'est exactement ce que je voulais

maintenant faut que je trouve le moyen d'enlever le scrolling qui est en bas.

Par contre je ne comprend pas pourquoi mon titre collection faire part mariage est sur 2 lignes

Ouvre des nouvelles discussions pour les autres problèmes STP.

merci de ton aide en tout cas:ccool: