Mettre une image au milieu ?
grenault
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
Bernd
> 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
SAM
> 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
;-)
yamo'
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
SAM
> Salut,
>
> SAM a tapoté, le 14/09/2010 20:15:
>> Le 14/09/10 18:03, grenault a écrit :
>>>
>>
>> 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 ?
grenault
Oui, c'est bien, je conserve cet exemple (tu me diras pour combien j'en
ai ?). Dommage que le texte ne coule pas.
Merci.
yamo'
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
SAM
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.
Williamhoustra
"grenault" <con...@guy-renault.com> a écrit dans le message de groupe de
discussion : 4c8f9ccf$0$5401$ba4a...@reader.news.orange.fr...
> Bonjour,
>
> Pas trouvé {float: middle} ?
>
J'ai fait un tuto à ce sujet sur mon site voir http://wmarie.free.fr
SAM
Tant que tout se passera dans un cadre fixe prédéfini en taille et
position (#tout) ...
ça restera un peu de la triche.