18041 sujets

Questions générales et questions de débutants

Centrer un élément verticalement

Bonjour,

J'ai toujours réussi a me débrouiller avec les css mais la je sèche!!

j'ai créer un galerie d'image, il y a des photos en position portrait et paysage.
Tout est réglé via un petit code php.
Mon problème et que j'aimerai que ma photo soit centrée verticalement.

je vous montre mon code:
<style type="text/css">
/* CSS_photo*/

.conteneur {
	height: 500px;
	width: 520px;
	margin-right: auto;
	margin-left: auto;
}
.conteneur2 {
	height: 450px;
	width: 520px;
	margin-top: auto;
	margin-bottom: auto;
	background-color: #0033FF;
	padding: auto;
}
.photo {
	height: 450px;
	width: 450px;
	margin-right: auto;
	margin-left: auto;
	float: left;
}
.bouton {
	height: 35px;
	width: 35px;
	float: left;
	margin-top: 200px;
}

</style>


Voilà pour les css

<div class="conteneur">
<div class="conteneur2">
<div class="bouton"><?php echo $html2; ?></div>
<div class="photo"><div align="center"><img src="photographies/<?php echo $dossier; ?>/<?php echo $nom; ?>.jpg"></div></div>
<div class="bouton"><?php echo $html; ?></div>
</div>
</div>
</div>



Merci à tous

adresse du site http://oeil.aircity.org
Modifié par berkut airwhite (13 Apr 2007 - 23:29)
Bonjour,

Ben si tu passes par php et comme le height de ta class .photo est fixe, il ne te reste qu'a determiner en php la hauteur de ta photo (sans problème: imagesy() ), que tu soustraits à la hauteur de ta class .photo, le tout divisé par 2 et tu donnes un margin-top (ou bottom) de cette valeur à ton image.

Si ta class .photo n'a pas de height fixe c'est une autre histoire.

Voilou.

Ps; tu devrais éviter d'utiliser 3 blocs en float left consécutifs, eventuellement ta class photo dans le flux en margin: 0 auto 0 (pas de float avec margin: auto !! ) et tes boutons en absolute.
Salut,

Avec un height variable (et ou width variable), c'est guère plus compliqué, toujours récupérer le width et height de la photo en php et un positionnement en absolute pour ta photo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

			

<head> 


<style type="text/css">

/* CSS_photo*/



.conteneur {
	width: 520px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 50px;
	border: 1px solid black;
}

.conteneur2 {
	position: relative;
	width: 520px;
	margin-top: auto;
	margin-bottom: auto;
	background-color: #0033FF;
	padding: auto;

}

.photo {
	height: 450px;
	width: 450px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	background: lime;
}

#image {
	height: 200px;
	width: 350px;
	position: absolute;
	left: 50%;
	margin-left: -175px;/* 1/2 du width de la photo récupéré en php */ 
	top: 50%;
	margin-top: -100px; /* 1/2 du height de la photo récupéré en php */
	background: yellow;
}

.bouton_g {
	height: 35px;
	width: 35px;
	position: absolute;
	top: 200px;
	left: 0;
	background: red;
}

.bouton_d{
	height: 35px;
	width: 35px;
	position: absolute;
	top: 200px;
	right: 0;
	background: red;
}

</style>

</head>
<body>
<div class="conteneur">
	<div class="conteneur2">
		<div class="bouton_g">
		</div>
		<div class="photo">
			<div id="image">
			</div>
		</div>
		<div class="bouton_d">
		</div>
	</div>
</div>
</body>

</html>
Merci pour ton code
Je l'utiliserai surement plus tard mais comme j'ai quelques notions en php, je vias pas perdre des heures juste pour centrer une image verticalement. Je trouve d'ailleurs que c'est un comble de devoir faire tout ça juste pour centrer une photo...

Merci encore
Tu as aussi une technique trés simple, c'est de ne pas mettre de div pour chaque photo, en mettant tes photos directement dans ton conteneur:

<div class="photo">
  <img src="img1" alt=""/>
  <img src="img2" alt=""/>
  <img src="img3" alt=""/>
</div>

et ensuite tu mets vertical-align:center a tes images (.photo img{vertical-align:center}), et ça marche à tout les coups!
Modifié par matmat (14 Apr 2007 - 17:24)
Sujet clos
Aller à