[Résolu] Problème de centrage de photo dans un popup

[Nerva]

Bonjour.

A partir d'une page contenant les vignettes, j'affiche la photo en popup.

Lien vers le popup dans la page des vignettes :

Code : Tout sélectionner

<td width="140" height="140"><div align="center"><a href="photos/test.htm" onClick="window.open('','popup','width=1024,height=768,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img class="thumb" src="photos/test.jpg" alt="Afficher la photo"></a></div></td>

Code du popup (une page HTML par photo) :

Code : Tout sélectionner

<center>
<table>
	<tr>
		<td valign="middle"><a href="Javascript:window.close();"><img class="photo" src="test.jpg" alt="Fermer"></a></td>
	</tr>
</table>
</center>

Ce système me convient parfaitement (le fond noir du popup en plein écran fait bien ressortir la photo) mais il y a un "bug" que je n'arrive pas à résoudre : malgré la déclaration d'alignement "middle", la photo dans le popup ne s'affiche pas au centre de celui-ci mais est alignée en haut.
Je voudrais essayer de baliser l'alignement dans la feuille de style mais je ne connais pas le code.

Si vous avez une solution ou une autre.

Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[calimo]

Mon dieu ! Des popups, des tableaux pour la mise en forme et des balises HTML dépréciées

Tu ferais mieux de te mettre aux CSS

Sinon, ton valign="middle" s'applique à la cellule (<td>). Donc forcément si la cellule n'est pas alignée...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Nerva]

Oui, c'est vrai, maintenant que tu me le dis, c'est tout à fait logique.
Les CCS, oui, mais je ne sais justement pas comment paramétrer la feuille de style pour définir le centrage vertical dans la page...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[nico@nc]

Oui, c'est vrai, maintenant que tu me le dis, c'est tout à fait logique.
Les CCS, oui, mais je ne sais justement pas comment paramétrer la feuille de style pour définir le centrage vertical dans la page...

Code : Tout sélectionner

text-align : center;

Pour tout ce qui est CSS, tu peux visiter Alsacréations, le Site du Zér0, ...

Quand au code de ton image dans la popup, tu ferais mieux de mettre une description pour le alt, et Fermer en title (quoique, je ne sais pas si c'est très bien ça... peut-être plutôt un texte "cliquez sur l'image pour fermer cette fenêtre" ?). Pareil pour la miniature.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[calimo]

Pour tout ce qui est centrage, une seule référence : alsacréations !

Centrer les éléments ou un site web en CSS

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.3) Gecko/20061201 Firefox Firefox/2.0.0.3 (Ubuntu-feisty)

[guilhem_mdg]

Pour centrer un div H et V :

Code : Tout sélectionner

 .centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Nerva]

Non, ça ne fonctionne pas...

Précisions.

Chaque photo est ouverte dans sa page HTM.
Chaque photo est soit en 600 x 900 ou en 900 x 600.
Chaque galerie comporte des photos en portrait et en paysage.

C'est dommage qu'un simple vertical-align: middle; dans la feuille de style ne fasse pas l'affaire...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Nerva]

Bon, alors on vient de me donner la solution ; là encore, c'était tellement simpliste !
Exit le balisage complexe de la feuille de style, il suffisait de remplacer <table> par <table height="100%"> et la photo est automatiquement centrée verticalement...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3