Mettre une image au milieu ?

Le
grenault
Bonjour,

Pas trouvé {float: middle} ?

Guy

--
Photo, Home-cinéma, Polars, vin, cartes virtuelles
http://www.grenault.net/cartes_postales.htm
http://www.grenault.net
http://guides-pratiques.info/annuaire.html
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
romer
Le #22570021
grenault
Bonjour,

Pas trouvé {float: middle} ?



<div class="mitan">
</div

.mitan{text-align:center;}
On peut ajouter des marges à la classe. Ça fait plus joli.
Le text-align:center fait intrus pour une image et n'est sans doute pas
très orthodoxe mais marche bien avec tous les navigateurs.
--
A+

Romer
SAM
Le #22570131
Le 14/09/10 18:03, grenault a écrit :
Bonjour,

Pas trouvé {float: middle} ?



et non ... :-(
et ... pas prévu en CSS3, à ce qu'il me semble.

margin: auto; ?

ou text-align: center; sur le bloc conteneur


--
Stéphane Moriaux avec/with iMac-intel
grenault
Le #22570251
Le 14/09/2010 19:34, Bernd a écrit :
grenault
Bonjour,

Pas trouvé {float: middle} ?



<div class="mitan">
</div

.mitan{text-align:center;}
On peut ajouter des marges à la classe. Ça fait plus joli.
Le text-align:center fait intrus pour une image et n'est sans doute pas
très orthodoxe mais marche bien avec tous les navigateurs.



;-)

--
Photo, Home-cinéma, Polars, vin, cartes virtuelles...
http://www.grenault.net/cartes_postales.htm
http://www.grenault.net
http://guides-pratiques.info/annuaire.html
yamo'
Le #22570301
Salut,

SAM a tapoté, le 14/09/2010 20:15:
Le 14/09/10 18:03, grenault a écrit :
Bonjour,

Pas trouvé {float: middle} ?



et non ... :-(
et ... pas prévu en CSS3, à ce qu'il me semble.

margin: auto; ?

ou text-align: center; sur le bloc conteneur



Tout ce que j'ai réussit à faire c'est :
voulu (et étrangement je n'ai pas réussit à centrer verticalement).

--
Stéphane
http://pasdenom.info
SAM
Le #22570891
Le 14/09/10 21:19, yamo' a écrit :
Salut,

SAM a tapoté, le 14/09/2010 20:15:
Le 14/09/10 18:03, grenault a écrit :

Pas trouvé {float: middle} ?



et non ... :-(
et ... pas prévu en CSS3, à ce qu'il me semble.

margin: auto; ?

ou text-align: center; sur le bloc conteneur



Tout ce que j'ai réussit à faire c'est :
voulu (et étrangement je n'ai pas réussit à centrer verticalement).



Heu ... avec mon Firefox et sans sortir le double-décimètre ça a l'air à
peu près OK

(cite)
<style type="text/css">
#lipsum{text-align:center;vertical-align:middle}
#milieu{margin:0.4em;position:absolute;left:auto;right:50%;top:auto;bottom:50%;text-align:center;vertical-align:middle}
</style>
(/cite)

Pour lipsum, vertical-align:middle; ne sert à rien

Pour #milieu, normalement on fait :

position: absolute;
top: 50%; /* centré dans la fenêtre horizontalement */
left: 50%; /* centré dans la fenêtre verticalement */
width: 68px; /* largeur de l'image */
height: 176px;
margin-left: -34px; /* décale img de 1/2 largeur */
margin-top: -88px; /* décale img de 1/2 hauteur */

et c'est mieux de le sortir du div, des fois que ce div serait
positionné et qu'il soit moins haut que la fenêtre.

À voir ici :
avec un carroyage pour mieux apprécier le centrage.

Mais ... le texte ne coule pas "autour" et se glisse dessous :-/

et p'têt' bien qu'IE s'y emberlificote ?

--
Stéphane Moriaux avec/with iMac-intel
grenault
Le #22571141
Le 15/09/2010 00:24, SAM a écrit :
Le 14/09/10 21:19, yamo' a écrit :
Salut,

SAM a tapoté, le 14/09/2010 20:15:
Le 14/09/10 18:03, grenault a écrit :

Pas trouvé {float: middle} ?



et non ... :-(
et ... pas prévu en CSS3, à ce qu'il me semble.

margin: auto; ?

ou text-align: center; sur le bloc conteneur



Tout ce que j'ai réussit à faire c'est :
voulu (et étrangement je n'ai pas réussit à centrer verticalement).



Heu ... avec mon Firefox et sans sortir le double-décimètre ça a l'air à
peu près OK

(cite)
<style type="text/css">
#lipsum{text-align:center;vertical-align:middle}
#milieu{margin:0.4em;position:absolute;left:auto;right:50%;top:auto;bottom:50%;text-align:center;vertical-align:middle}

</style>
(/cite)

Pour lipsum, vertical-align:middle; ne sert à rien

Pour #milieu, normalement on fait :

position: absolute;
top: 50%; /* centré dans la fenêtre horizontalement */
left: 50%; /* centré dans la fenêtre verticalement */
width: 68px; /* largeur de l'image */
height: 176px;
margin-left: -34px; /* décale img de 1/2 largeur */
margin-top: -88px; /* décale img de 1/2 hauteur */

et c'est mieux de le sortir du div, des fois que ce div serait
positionné et qu'il soit moins haut que la fenêtre.

À voir ici :
avec un carroyage pour mieux apprécier le centrage.

Mais ... le texte ne coule pas "autour" et se glisse dessous :-/

et p'têt' bien qu'IE s'y emberlificote ?




Oui, c'est bien, je conserve cet exemple (tu me diras pour combien j'en
ai ?). Dommage que le texte ne coule pas.

Merci.

Guy

--
Photo, Home-cinéma, Polars, vin, cartes virtuelles...
http://www.grenault.net/cartes_postales.htm
http://www.grenault.net
http://guides-pratiques.info/annuaire.html
yamo'
Le #22571641
Salut,

SAM a tapoté, le 15/09/2010 00:24:
Tout ce que j'ai réussit à faire c'est :
> > voulu (et étrangement je n'ai pas réussit à centrer verticalement).


Heu ... avec mon Firefox et sans sortir le double-décimètre ça a l'air à
peu près OK



C'est étrange, au niveau centrage vertical, l'image est :
* l'équivalent de Firefox4.b7pre, Firefox 3.6 et un Chromium 5)
*

--
Stéphane
http://pasdenom.info
SAM
Le #22571841
Le 15/09/10 11:02, yamo' a écrit :
Salut,

SAM a tapoté, le 15/09/2010 00:24:
Tout ce que j'ai réussit à faire c'est :
voulu (et étrangement je n'ai pas réussit à centrer verticalement).




Heu ... avec mon Firefox et sans sortir le double-décimètre ça a l'air à
peu près OK



C'est étrange, au niveau centrage vertical, l'image est :
* l'équivalent de Firefox4.b7pre, Firefox 3.6 et un Chromium 5)
*


Le 1er avec : bottom:50%;
le 2nd avec : top: 50%;

Le 2dn, en plus, décale l'image de la 1/2 de sa hauteur.

Ça veut dire que (2) ça ne fonctionne pas en "automatique', il faut
dimensionner l'image ou, à tt le moins, connaître ses dimensions.

--
Stéphane Moriaux avec/with iMac-intel
Williamhoustra
Le #22571961
"grenault" discussion : 4c8f9ccf$0$5401$
Bonjour,

Pas trouvé {float: middle} ?



J'ai fait un tuto à ce sujet sur mon site voir http://wmarie.free.fr
SAM
Le #22572261
Le 15/09/10 12:54, Williamhoustra a écrit :


"grenault" de discussion : 4c8f9ccf$0$5401$
Bonjour,

Pas trouvé {float: middle} ?



J'ai fait un tuto à ce sujet sur mon site voir http://wmarie.free.fr



Tant que tout se passera dans un cadre fixe prédéfini en taille et
position (#tout) ...
ça restera un peu de la triche.

--
Stéphane Moriaux avec/with iMac-intel
Publicité
Poster une réponse
Anonyme