Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP Mettre une image au milieu ?

Mettre une image au milieu ?

10 réponses
Avatar
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
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
romer
grenault wrote:

Bonjour,

Pas trouvé {float: middle} ?



<div class="mitan">
<img src="images/rugby.png" alt="rugby" />
</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
Avatar
SAM
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
Avatar
grenault
Le 14/09/2010 19:34, Bernd a écrit :
grenault wrote:

Bonjour,

Pas trouvé {float: middle} ?



<div class="mitan">
<img src="images/rugby.png" alt="rugby" />
</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
Avatar
yamo'
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 :
<http://pasdenom.info/test/milieu2.html> mais, ce n'est pas le résultat
voulu (et étrangement je n'ai pas réussit à centrer verticalement).

--
Stéphane
http://pasdenom.info
Avatar
SAM
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 :
<http://pasdenom.info/test/milieu2.html> mais, ce n'est pas le résultat
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 :
<http://cjoint.com/data/jpavTSBTQD_milieu2.html>
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
Avatar
grenault
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 :
<http://pasdenom.info/test/milieu2.html> mais, ce n'est pas le résultat
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 :
<http://cjoint.com/data/jpavTSBTQD_milieu2.html>
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
Avatar
yamo'
Salut,

SAM a tapoté, le 15/09/2010 00:24:
Tout ce que j'ai réussit à faire c'est :
> <http://pasdenom.info/test/milieu2.html> mais, ce n'est pas le résultat
> 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 :
* <http://pasdenom.info/test/milieu2.html> non centrée (testé sur
l'équivalent de Firefox4.b7pre, Firefox 3.6 et un Chromium 5)
* <http://cjoint.com/data/jpavTSBTQD_milieu2.html> centrée


--
Stéphane
http://pasdenom.info
Avatar
SAM
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 :
<http://pasdenom.info/test/milieu2.html> mais, ce n'est pas le résultat
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 :
*<http://pasdenom.info/test/milieu2.html> non centrée (testé sur
l'équivalent de Firefox4.b7pre, Firefox 3.6 et un Chromium 5)
*<http://cjoint.com/data/jpavTSBTQD_milieu2.html> centrée



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
Avatar
Williamhoustra
"grenault" a écrit dans le message de groupe 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
Avatar
SAM
Le 15/09/10 12:54, Williamhoustra a écrit :


"grenault" a écrit dans le message de groupe
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