Discussion :

[solorac]

Bonjour la communauté,

Je viens de me lancer dans les css pour créer mon site.
Je voudrais centrer verticalement sur la page d'accueil le logo et le nom.
Mais je rencontre quelques difficultés.

Voiçi mon code sur ma page

Code :

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

1
2
3
4
5
6
7
<div class="Style9" id="wrap">
 
  <span class="Style7">Bienvenue sur le site officiel<br>
  de la SAFA</span><br>
  <
  <p align="center" class="Style1"><a href="index2.htm"><img src="Images/images%20-%20Site/Logo4.png" width="350" height="450" border="0" </p> 
 </div>

Et voiçi le code d'une partie de ma css :

Code :

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

1
2
body {background:url(Images/images%20-%20Site/Essai-fond2.jpg); color:#404040; font:76% eras medium ITC; margin:0 auto; padding:0;}
#wrap {background:inherit; color:#000000; margin:0 auto; width:750px;text-align:center}

Merci pour votre aide

[rinuom99]

pour FF tu peux le faire avec

Code :

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

1
2
vertical-align:middle;
	display:table-cell;

mais sous IE je pense pas qu'il sa marche

[solorac]

Je confirme sous ie cela ne fonctionne pas.
Quelle solution alternative puis-je employer ?

[Dude1205]

Salut,
je me suis retrouve dans la meme situation que toi recemment. je voulais afficher une liste de photos dont les hauteurs sont variables mais de telle maniere qu'elles soient toutes centrees verticalement dans leur conteneur.

voila le code html de mon exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<ul class="gallerie" >
<li>
        	<span></span>
			</li>
            <li><a id="a0" href="images/photos/garde/01.jpg" ><img id="img0" src="images/photos/garde/tiny/01.jpg" alt="sample 1" title="texte de la photo 1" /></a></li>
			<li><a id="a1" href="images/photos/garde/02.jpg"><img id="img1" src="images/photos/garde/tiny/02.jpg" alt="sample 2" title="sample 2" /></a></li>
			<li><a id="a2" href="images/photos/garde/03.jpg"><img id="img2" src="images/photos/garde/tiny/03.jpg" alt="sample 3" title="sample 3" /></a></li>
			<li><a id="a3" href="images/photos/garde/04.jpg"><img id="img3" src="images/photos/garde/tiny/04.jpg" alt="sample 1" title="sample 1" /></a></li>
		</ul>

et la css que j'ai trouvée sur internet et adaptee à mon exemple :

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
.gallerie {
	clear:both;
	height:8em;
	list-style:none;
	text-align: center; 
	vertical-align: middle;
	padding:0px;
	margin:0;
	width:100%;
}
 
.gallerie span {
	height:100%;
}
 
.gallerie * {
    vertical-align: middle;
}
/*\*//*/
.gallerie {
    display: block;
}
.gallerie span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
.gallerie li {
	display: inline;
}
 
.gallerie img {
	max-height:94%;
	width:22%;
	border:solid 3px white;
}

[solorac]

Je te remercie et je vais de ce pas essayer de l'appliquer à ma situation.
Je te tiens informé du résultat.